I am using google map in my angular2 app. I have also used MarkerCluster as below.
for (let marker of this._markers) {
let lat = +marker.latitude;
let long = +marker.longitude;
let markerobj = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: marker.name,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 6,
fillOpacity: 0.8,
fillColor: '#5A7793',
strokeColor: '#FFFFFF',
strokeWeight: 2,
},
map: this.map,
visible: true,
});
this.markerLayer.push(markerobj);
latlngbounds.extend(markerOnMap.getPosition());
markerList.push(markerOnMap);
}
let markerCluster = new MarkerClusterer(this.map, markerList, { imagePath: '../assets/images' });
I want to show around 100000 markers on google map. I am facing lot of performance issues when i tried to plot 100000 markers.
As per client requirement I can not use other map libraries. I need to stick with Google Map.
Do you have any suggestion which help me to improve the performance.
You don't plot 100,000 markers at once. What you need to do is reduce the amount of data you are displaying at a time. Only display individual markers when you are zoomed in so there are not so many markers in the view.
So what I would suggest is that load the markers from the server based on the bounds of your google map. So that would be the coordinates at the top left and bottom right.
So lets say you have 100,000 markers spread all over the world. At the world view it would be best not to show anything and ask the user to zoom in. Once you are at a lower zoom level use the bounds of the map to get markers from the server which lie inside those bounds. This should reduce the number of markers you have to display substantially. I don't know the coverage of your data but you can figure out what zoom levels work best for you.
Related
I need to draw a large number of rectangles (potentially up to millions), which are located all over the world. I was wondering what the optimal approach is to achieve the best possible performance. my requirements are:
all items are rectangles (not squares), and identical in size and color
their rotation is different per individual item though
they have different fixed locations – they do not move
the rectangles need to be pickable
they might need to be scaled according to current zoom level (to make them look like real objects on the ground)
use the webgl renderer
what I have tried to far:
const features = R.map(
(i) => {
// [...] calculate `coords` and `rotation`
const point = new ol.geom.Point(coords);
const feature = new ol.Feature(point);
feature.__angle = rotation;
return feature;
},
R.range(0, count /* lots of them! */)
);
const sheetStyle = new ol.style.Style({
image: new ol.style.Icon({
size: [5, 8], // shape of rectangle
src: 'color.png' // 1×1px image
})
});
const vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({ features }),
preload: Infinity,
updateWhileAnimating: true,
updateWhileInteracting: true,
style: (feature, resolution) => {
const image = sheetStyle.getImage();
// TODO: is there a way to only have to do this once?
image.setRotation(feature.__angle);
// scale according to zoom level
image.setScale(0.3 / resolution);
return sheetStyle;
},
});
I was wondering if ol3 was doing any sort of optimization under the hood.
does it merge the geometries into one?
does it only display items that in the visible part of the map?
since all items are identical, is there a way to use instancing?
related: for better performance, I am only creating a single style object that I am reusing for all items. however I need to set a rotation on each of them, which is why I am using a style function. once it is set, the rotation won't change anymore though. is there a way around having to call the style function every frame?
I am also considering using a heatmap layer for lower zoom levels and then switching to the vector layer as the user zooms in.
it would be great if someone could give me hints for overall performance improvements.
I am building a graph utility that displays a rather large graph containing a lot of data.
One of the things I would like to be able to support is having multiple views of the data simultaneously in different panels of my application.
I've drawn a picture to try and demonstrate what i mean. Suppose i've built the gradiented image in the background using kinetic.
I'd like to be able to grab show the part outlined in red and the part outlined in green simultaneously, without having to rebuild the entire image.
var stage1 = new Kinetic.Stage({
container: 'container1',
width: somewidth,
height: someheight
});
var stage2 = new Kinetic.Stage({
container: 'container1',
width: someotherwidth,
height: someotherheight
});
var Layer1 = new Kinetic.Layer({
y: someY,
scale: someScale
});
// add stuff to first layer here...
var Layer2 = new Kinetic.Layer({
y: otherY,
scale: otherScale
});
// add other stuff to second layer here...
stage1.add(mapLayer);
stage1.add(topLayer);
stage2.add(mapLayer);
stage2.add(topLayer);
at the point at which I've added my layers to stage1, everything is fine, but as soon as i try to add them to stage2 as well, it breaks down. I'm sifting through the source but I cant see anything forcing data to be unique to a stage. Is this possible? Or do i have to duplicate all of my shapes?
Adding a node into multiple parents is not possible by KineticJS design. Each Layer has <canvas> element. As I know it is not possible to insert a DOM element into document twice.
There is an issue on a site I have been working on that for some reason the SVG image markers are not showing up in IE 11.
I have two sets of markers:
the default zoomed out has PNG markers for the suburbs
zoomed in has address specific numbered SVG ones
I use a fallback for older browsers that don't support SVG (testing it with modernizr). I am using the old Google Chart markers for IE 11 to get it to work (testing the user agent string to id it).
I want to know if anyone has an idea as to:
the cause
whether it is something screwed up with IE11 Edge mode (switch the document mode to 10 to get it to work)
or something that is failing with Google.
The site is:
http://artstrail.org.au/arts-trail.php
You can see it fail if you change the user agent string in IE 11 while leaving it in Edge Document mode.
It seems that Google Maps doesn't really support using SVG images for markers at the moment. This fact is easy to overlook, because it turns out that SVG marker images do actually work in, eg. Chrome and Opera.
However, the Google Maps API (v3) specifically provides Symbol objects for displaying vector paths in map markers. I found that specifying the vector image in SVG path notation allowed it to work in IE and other browsers.
Example (from Google Maps docs, here):
var goldStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: 'yellow',
fillOpacity: 0.8,
scale: 1,
strokeColor: 'gold',
strokeWeight: 14
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: goldStar,
map: map
});
(Thanks to this answer too)
Actually, for me adding marker optimized: false and icon scaledSize: new google.maps.Size(25, 25) does it for me. So even if what Nick F says is true (that it's not officially supported), it works.
SVG markers start showing up in IE11. It seems that the scaledSize adds a style width and height on the <img> element, unsure what optimized does in this case.
Example:
var marker = new google.maps.Marker({
map: map,
position: poi.geometry.location,
title: poi.name,
zIndex: 99,
optimized: false,
icon: {
url: 'loremipsum.svg',
scaledSize: new google.maps.Size(25, 25),
size: new google.maps.Size(25, 25),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(12.5, 12.5)
}
});
Credit: Google Maps SVG marker doesn't display on IE 11
The IE implementation deviates from the SVG standard in the following ways:
Properties of a marker element inherit at the point of reference, not from the ancestors of the marker element.
References
MS-SVG: The 'marker' element
Add meta to emulate IE10/IE9 if the SVG supports in lower IE versions.
ie) for IE-10 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
I developed an script to display 2 layers ob base map.
but it is not zooming properlly.
I am using following code
can you please suggest me
<script type="text/javascript">
var map, layer, select, hover, control;
function init(){
map = new OpenLayers.Map('map', {
controls: [
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.Navigation()
]
});
layer = new OpenLayers.Layer.WMS(
"States WMS/WFS",
"http://localhost:8080/geoserver/topp/wms",
{layers: 'topp:india_road',transparent: true}
);
select = new OpenLayers.Layer.Vector("Selection", {styleMap:
new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
});
hover = new OpenLayers.Layer.Vector("Hover");
map.addLayers([layer, hover, select]);
var wmsLayer = new OpenLayers.Layer.Google('Google Layer',{} );
map.addLayer(wmsLayer);
map.setCenter(new OpenLayers.Bounds(143.83482400000003,-43.648056,148.47914100000003,-39.573891).getCenterLonLat(), 5);
}
</script>
What do you mean by not zooming properly?
Are you finding that they are not matching up with the google maps when zooming in as far as you can go, or the zoom work until you try to pan and then the layers don't stay lined up with google maps? If this is the case then you are probably zooming in further than is supported by the Google map service. There is no easy way to fix this and I recommend you alter allowed scales and zoom with the following settings
minScale - float -- the minimum scale value at which the layer should display
maxScale - float -- the maximum scale value at which the layer should display
numZoomLevels - int -- Total number of zoom levels
Also please see this link on more information about google zoom scales.
If you are finding that none of your layers match the google background. I.E. they look like they are zoomed in out or offset then it is likely that your data is in a different projection to the google maps layer. Google maps uses EPSG:900913 as their SRS. The eisiest way to do this is to let geoserver do the re projection for you. Go to your layer setting in geoserver make sure you have the native projection set correctly and set the declared SRS to EPSG:900913.
If that doesn't help then I think we need more information on exactly what the problem is.
I am trying to set up Google map (v3) inside Joomla tabs but there is display problems on map.
If i move away from tab where the map is and change back map canvas is grey and map is displayed only partially on left corner of map canvas.
Image with screen capture:
I get this worked on other site by setting map size on map parameters but there was used Google map version 2 and i could not find correct syntax for setting map size on version 3 map.
Map options are set in global variable.
var mapoptions = {
zoom: 6,
center: new google.maps.LatLng(60, 50),
mapTypeId: google.maps.MapTypeId.ROADMAP,
gridSize: 50,
size(600, 700, 'px', 'px')
}
What is the correct syntax of map size or is there other solution for this?
I have tested resize function and playing with zoom but those was not helped.
I got this solved by adding short delay (100ms) before map initializing function call.
Maybe map canvas did not get fully rendered before google map was accessing it.