Leaflet Realtime - previous markers remain on the map - javascript

I work with the leaflet plugin leaflet-realtime by Per Liedman.
https://github.com/perliedman/leaflet-realtime
In my application, the user can switch between different realtime JSON sources. My problem is, if I change the source, the previous markers remain on the map.
I made a plunk with a modified earthquake example, here you can see the behavior.
https://next.plnkr.co/edit/MzecRNp0ocAuCQF6?preview
Maybe something with remove, but I don't know where and how to use it.
Working with a LayerGroup and clearLayers() before reading the new data works, but it is not nice ("blinking markers").
Thank you for your help!

I have found a solution. leaflet.realtime provides the function setUrl() (not in the README but mentioned here https://github.com/perliedman/leaflet-realtime/issues/15)
Changed the script.
https://next.plnkr.co/edit/weeikt129ADzHFrh?preview
Important: "leaflet.realtime version 2 and up of this plugin is _only compatible with Leaflet 1.0 and later. Use earlier versions of Leaflet Realtime if you need Leaflet 0.7 compatibility." See README.md

Related

OpenLayers KML Incremental Updates

I am trying to determine if it is feasible for OpenLayers v5 to handle incremental updates to KML files. The KML files I am working with are large but are dynamic and receive updates every so often. Instead of refreshing the entire KML file it would be preferable from a performance perspective to just load the updates. We were thinking of passing the updates using the field. Any help would be much appreciated!
If you included tags in angle brackets, they were likely lost from your question.
I'm guessing you were thinking of using the KML NetworkLinkControl and Update tags? If so, then OpenLayers would need to support NetworkLink, NetworkLinkControl, Update, and other associated KML tags. I don't see any reference to NetworkLInkControl in the OpenLayers documentation, so you're probably out of luck on that option, but I might not be looking in the right place.
Another way to do this, since OpenLayers does appear to support NetworkLink KMLs, might be to split up your data KML into a number of areas, combine them via a series of NetworkLinks, and only update the ones on your server which have changes.

Extension for Google Earth that allows freehand and draggable selection of placemarks

I have spent about 3 whole days searching for a Google Earth API extension that would enable users to perform selections of placemarks by either clicking multiple points, OR by drawing a polygon. I didn't budget or spec this functionality because I was confident that this is the type of thing that would be readily available for Google Earth. Turns out I was wrong.
At any rate, I am not asking anyone to write the code, I am hoping someone has come across a javascript library that enables this functionality.
As you have discovered GE plugin does not support drawing or dragging without writing some code yourself.
There is an extension library that I have found useful for draggable placemarks. Use makeDraggable().
Example here:
http://earth-api-utility-library.googlecode.com/svn/trunk/extensions/examples/draggable.html
Source here:
https://code.google.com/p/earth-api-utility-library/source/browse/trunk/extensions/src/edit/dragging.js
I believe you want to look at the second example: https://developers.google.com/earth/documentation/events#examples

How to optimize MarkerWithLabel on google maps when having too many markers

I have been developing an application on google chrome, and I've been using the MarkerWithLabel library, which i believe is written by google developers. I am using a little over 100 markers on the map and it seemed to be pretty smooth until i checked in firefox (and lets not even mention IE). It is pretty damn laggy in FF. Any way to optimize it?
http://jsfiddle.net/zDTNS/2 Here is a sample in jsfiddle
To clarify, having 200 regular markers works fine. The problem shows up when using MarkerWithLabel
Generally speaking the best way to optimize any Google maps application is using a clustering technique. As the application loads more and more markers the client-side rendering over-head will only increase. The addition of labels only compounds the issue.
A number of clustering techniques exist and are simple to implement, I'd suggest starting with this article: https://developers.google.com/maps/articles/toomanymarkers.
Edit Leaving above in place in case anyone doesn't have the same spec requirement, but similar issue.
My only other suggestion would be to turn off the labels when above a certain zoom level? This will at least alleviate some of the worst of the rendering issues.
Edit After doing a bit of research the library introduced here has been shown to have far more favorable performance characteristics than markerWithLabel. It relies on a html canvas though so is ie9+.
After spending 2 weeks researching and trying all sorts of methods, most suggested on here, I arrived to the conclusion that there just is no way to optimize at the moment. For some reason firefox struggles when there are divs on top of the map and keeping them in sync. The performance on the latest firefox was almost the same as IE8.
I found that having a ton of google markers does not cause any lagging, but divs do. What I ended up doing was create a server side function that converts text to png. When initializing the google marker, you make the icon url TextToImage.aspx?text=Hello&size=13
Then I set the anchor of the new marker to (15, 15) and that became my new 'label'. I added some click and mouseover listeners to the label marker and voila! Insane improvement to performance.
If you only want a couple of characters inside a pin, another alternative is:
https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=${displayCharacters}|${pinColorHex}|${fontColorHex}
Check this example.

Google maps icon color

Currently you can use googles chart api to load custom markers with different colors
See here: https://developers.google.com/chart/image/docs/gallery/dynamic_icons
But this has been deprecated. So to ensure that my website works in the future what should I be using?
Or is there some simple way of defining the color of the markers using css or something?
instead of using a deprecated library I found http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#StyledMarker which works perfectly :)

How do I implement google maps yelp.com style?

I have multiple locations (20+ per page) that need to be mapped on a single map. I would like to click on a link for the location that is not dynamically generated (for SEO purposes) that would open the info window for the respective marker on the map.
Behavior should mimic http://maptheburg.com/ - but this map has the sidebar links dynamically generated.
Yelp.com is the only site I have seen so far that manages to implement the Google Maps API with unobtrusive JavaScript.
I'm not entirely sure what the yelp implementation is but if it's unobtrusive JavaScript mapping you're after then your only feasible option is to deliver a static image rather than an interactive map where JavaScript is unavailable.
A quick walk through of this technique can be found here
HTH.
Yelp.com has it's own JavaScript library which is interacting/using Google Map's JavaScript API for maps. You might want to start by peeking in there.
Might want to also check out PdMarker for advanced Google Maps markers.
If I remember right, Yelp took one of the open-source markers implementations and modified it for their own uses.

Categories

Resources