Skip to main content

Overlays - A complex example

    In the last post we have seen what an overlay is and we have also seen a small simple overlay example as well. Today's example is a bit complex as compared to the last one, but is not at all difficult. We will directly jump to the code instead of having any more descriptions and stuff. So, here's the code.



    The output of the above code looks as seen in the result section above. You need to click on the map to place a marker on the map. You can place multiple markers on the map by clicking on the map multiple times. By clicking on the "Clear overlays" button all the markers on the map will disappear. By clicking on the "Show all overlays" button, all the cleared, but not deleted markers will reappear. Clicking on the "Delete overlays" buttons will remove all the markers permanently.

    If you have any doubts or queries regarding the code please leave a comment or drop me a mail.
Labels:

Comments

  1. vcubeJanuary 21, 2024 at 11:04 PM

    Nice post. By reading your blog, i get inspired and this provides some useful information. Thank you for posting this exclusive post for our vision.
    Best React-Js Training Institute In Hyderabad

    ReplyDelete

Post a Comment

Please leave your comments here...

Recommended for You

ES6 101 - Class

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

CSS - Counter-increment and counter-reset

Today we will take a look at a couple of CSS properties that are usually used together but not very frequently used. We will be talking about the counter-increment and counter-reset properties. As the name suggests counter-increment and counter-reset definitely have something to do with counters. Let's take a look at the example below which will clearly illustrate the usage of these 2 properties. The implementation is very clear and straight-forward. The only question that remains now, can these CSS properties replace the ordered list (ol-li) HTML code? Do let me know your comments and feedback. Would you use these CSS properties against the standard ol-li structure?
Post a Comment
Read more

Side-scrolling web pages issue with Jquery Mobile - Issue #5748

    While developing a Jquery mobile based application, I came across a issue that is observed only on the iOS 6 devices and Android 4.2.2 devices.     What is the issue?         Web pages are side scrolling on iOS6 and Android 4.2.2 devices.     How did I debug the issue?         This bug was in our applications bug tracker for a long time and since I am the lone front-end developer the project that I am working on, my manger was pushing me to close this bug quickly. I had used the perfect mobile meta tag and still the web pages were side-scrolling. None of my divs had width that was going beyond the device widths and still there was this issue. That day, I decided to break down my HTML to pieces, and tested each piece on the dreadful iOS 6 device. I came down to a textbox that had some placeholder text in it and there it was, the issue was glaring me in my face. ...
Post a Comment
Read more

Removing overlays

    "Overlays"....!!! What is this now! Never heard or used it before? You might immediately say "NO"...But, actually all of you have already seen what an overlay is and you have also used it! Now you would say "When!?!?" Well, all of the markers, polylines, polygons that you have created are overlays. Overlays are objects on the map that are tied to latitude/ longitude coordinates, so they move when you drag or zoom the map. Overlays reflect objects that you add to the map to designate points, lines, areas or collection of objects.     Till now we have seen how to create an overlay. In today's example we will see how to remove an overlay. In this example we will create markers on click. But the difference will be that when you create a new marker, the earlier one will disappear from the map. So at any given time there would only be one single marker on the map! Note that removing the marker does not delete the overlay; it simply removes the overlay...
Post a Comment
Read more

KML Layer Example

         Until now, we have covered various examples involving markers, polylines, polygons, i.e. creating overlays. We have also seen other examples to remove overlays! We will now move on to some other concepts. Today we will have a look at what KML is and how to create a KML layer!          Let us first understand what KML is and why is it necessary. KML stands for Keyhole Markup Language which is an XML schema for expressing geographic annotation and visualisation within 2D maps and 3D Earth browsers. The KML file specifies a set of features (place marks, images, polygons, 3D models, textual descriptions, etc.) for display in Google Earth, Maps and Mobile, or any other 3D Earth browser (geobrowser) implementing the KML encoding. Each place always has a latitude and a longitude. Other data can make the view more specific, such as tilt, heading, altitude, which together define a "camera view". ...
Post a Comment
Read more