When a user is zoomed out on the gmsmapview the markers get very close together( there is only a max of like 100 markers). Is there a way to zoom in on markers that are extremely close when a user clicks on them? Rather than just clicking on each individual marker?
Why not using markers clusters..this tecnique show a markers cluster with the numer of cluster in the area and clicking the zoom to marker
I think you need somethings like this: Show also the sample and here the complete source
<script type="text/javascript">
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < 100; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Related
I have a layer with markers and one layer with polylines. The markers are at the end of the polylines. I like to drag any marker synchronous with the end (overapping) of the polyline.
var features = new ol.Collection();
var featureOverlay = new ol.layer.Vector({source: new ol.source.Vector({features: features}),style:styles});
featureOverlay.setMap(map);
var markers = new ol.Collection();
var markerOverlay = new ol.layer.Vector({source: new ol.source.Vector({features: markers}),style:styles});
markerOverlay.setMap(map);
var modify = new ol.interaction.Modify({features: features});
map.addInteraction(modify);
var modifyn = new ol.interaction.Modify({features: markers});
map.addInteraction(modifyn);
It's not working synchronous. I have to drag the end of the polyline and the marker separate.
How can I drag both at the same time?
Thanks for helping!
Andreas.
I got it!
I collect all features at the mouse position in realtime and save them in a collection. This collection is the feature in modify.
Cheers!
var allFeaturesAtPixel = new ol.Collection();
var modify = new ol.interaction.Modify({features: allFeaturesAtPixel});
map.addInteraction(modify);
map.on('pointermove', function (evt)
{
allFeaturesAtPixel.clear();
map.forEachFeatureAtPixel(evt.pixel, function (feature) {allFeaturesAtPixel.push(feature);});
});
I have a drop dead simple test app in which i execute the following code
let marker = GMSMarker(position:CLLocationCoordinate2DMake(33.987884, -118.474434))
marker.icon = GMSMarker.markerImageWithColor(UIColor.redColor())
marker.panoramaView = panoramaView;
marker.snippet = "I am Here!"
panoramaView.moveNearCoordinate(marker.position)
If i move the coordinate to some other street off the beach i can see the marker just fine. But from the code above I don't see anything. Does anybody know why I can get an area to show up fine in a GMSPanoramaView however placing a marker there does not work?
I think some implementation was not done. Not sure what are those implementation but I found some tutorials regarding your issue. Or according to the document "Note that if the marker's position is too far away from the panoramaView's current panorama location, it will not be displayed as it will be too small".
Checking the Street View locations and point-of-view (POV):
GMSPanoramaView *panoView_;
panoView_.camera = [GMSPanoramaCamera cameraWithHeading:180
pitch:-10
zoom:1];
Markers within Street View
// Create a marker at the Eiffel Tower
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(48.858,2.294);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
// Add the marker to a GMSPanoramaView object named panoView_
marker.panoramaView = panoView_;
// Add the marker to a GMSMapView object named mapView_
marker.map = mapView_;
That's the first option, another option is Google Maps JavaScript API inside a WebView. https://developers.google.com/maps/documentation/javascript/examples/streetview-overlays
var panorama;
function initMap() {
var astorPlace = {lat: 40.729884, lng: -73.990988};
// Set up the map
var map = new google.maps.Map(document.getElementById('map'), {
center: astorPlace,
zoom: 18,
streetViewControl: false
});
// Set up the markers on the map
var cafeMarker = new google.maps.Marker({
position: {lat: 40.730031, lng: -73.991428},
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var bankMarker = new google.maps.Marker({
position: {lat: 40.729681, lng: -73.991138},
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Bank'
});
var busMarker = new google.maps.Marker({
position: {lat: 40.729559, lng: -73.990741},
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
Here are links for tutorials and repo of the codes
http://googlegeodevelopers.blogspot.com/2013/09/sun-surveyor-shines-with-street-view.html
https://github.com/ratana/streetview-panorama-demo
I hope this helps.
I'm using Openlayer 3.5 and load an OSM map "EPSG:3857".
var extent = [116.826673, 4.854776, 126.748593, 18.697146];
var philiExtent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:4326", "EPSG:3857"));
var view = new ol.View({
center: ol.proj.transform([121.787633, 11.775961], 'EPSG:4326', 'EPSG:3857'),
zoom: 0,
extent: philiExtent,
resolutions: [2560, 1280, 640, 320, 160, 80, 40, 20, 10, 5, 2.5, 1.2, 0.6],
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map'
});
But my features from webService are in "EPSG:4326"
function showData(data) {
var format = new ol.format.WKT();
var feature;
$.each(data, function (i, link) {
feature = format.readFeature(link.geom);
wktTraffic.addFeature(feature);
})
console.log('done load map');
}
So how I make the map be on 4326 or the new feature be on 3857.
I prefer first option.
Check out the FAQ section: http://openlayers.org/en/master/doc/faq.html#how-do-i-change-the-projection-of-my-map-
How do I change the projection of my map?
There is a good chance that you want to change the default projection of OpenLayers to something more appropriate for your region or your specific data.
The projection of your map can be set through the view-property. Here are some examples:
// OpenLayers comes with support for the World Geodetic System 1984, EPSG:4326:
var map = new ol.Map({
view: new ol.View({
projection: 'EPSG:4326'
// other view properties like map center etc.
})
// other properties for your map like layers etc.
});
// To use other projections, you have to register the projection in OpenLayers:
//
// By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
// So we create a projection instance for EPSG:21781 and pass it to
// ol.proj.addProjection to make it available to the library for lookup by its
// code.
var swissProjection = new ol.proj.Projection({
code: 'EPSG:21781',
// The extent is used to determine zoom level 0. Recommended values for a
// projection's validity extent can be found at http://epsg.io/.
extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
units: 'm'
});
ol.proj.addProjection(swissProjection);
// we can now use the projection:
var map = new ol.Map({
view: new ol.View({
projection: swissProjection
// other view properties like map center etc.
})
// other properties for your map like layers etc.
});
We recommend to lookup parameters of your projection (like the validity extent) over at epsg.io.
To reproject your features to EPSG:3857, you can set the options dataProjection and featureProjection when parsing the features from the WKT string. See also ol.format.WKT#readFeature
var format = new ol.format.WKT();
var feature;
$.each(data, function (i, link) {
feature = format.readFeature(link.geom, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
wktTraffic.addFeature(feature);
})
I am currently working on a openlayers 3 project and for better visulaizing i need to show both. The Polygon shape(attribute based color) which works great and an icon on the polygon position. I know that the polygon contains multiple coordinates and so its not so easy to define a position for the icon. Now i have some kind of workaround that creates an seperate overlay with the interior Points of the polygon to mark the position of the icons. To make the project more simple i want to combine these two styling. Does anyone know if its possible?
Kind Regards
I presumes that you use a ol.source.serversource for your data.
The trick is to test all your features for being a polygon. If it is, you create a point feature you add to your source.
First create the source and the layer:
var avlVectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
myLoader(resolution);
}
});
var myLayer = new ol.layer.Vector({
source: myVectorSource,
style: myStyleFunction
});
The layer has a style function to set the right icon.
The main thing is the loader:
var myLoader = function(resolution){
$.ajax({
url: "http://myJsonSource.com",
timeout: 1000,
success: function(response) {
var layerJSONString = $.parseJSON(response);
var newFeatures = [];
j= 0;
var size=layerJSONString.features.length;
for (i = 0; i < size; i++){
var feat = layerJSONString.features[i];
var geom = feat.geometry;
var type = geom.type;
if(type == "Polygon")
{
var poly = new ol.geom.Polygon(geom.coordinates);
var extent = poly.getExtent();
var coord = [];
coord[0] = (extent[2]-extent[0])/2 + extent[0];
coord[1] = (extent[3]-extent[1])/2 + extent[1];
var point = new ol.geom.Point(coord);
newFeatures[j++] = new ol.Feature({
geometry : point,
StyleName : feat.properties.StyleName
});
}
}
avlVectorSource.addFeatures(myVectorSource.readFeatures(response));
avlVectorSource.addFeatures(newFeatures);
},
error: myLoadError
});
}
};
The documentation says that ol.geom.Polygon has a method called getInteriorPoint(). It has but I can get it to work. So I calculate the center point of the extent of the polygon.
I use "StyleName" to set the right icon in my style function.
I need to show the position of an user inside my Rails application, I used the following code and it works well:
function showLocations(){
<% if #profile.location.latitude.nil? || #profile.location.longitude.nil? %>
canvas = $('#map_canvas');
canvas.html("<h1>The user have not specified his location yet</h1>")
canvas.slideDown();
<%else%>
var latlng = new google.maps.LatLng(<%=#profile.location.latitude%>, <%=#profile.location.longitude%>);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("map_canvas")
var map = new google.maps.Map(canvas,
myOptions);
var marker = new google.maps.Marker({
position: latlng,
title:"<%=#profile.full_name%>"
});
marker.setMap(map);
<%end%>
$('#map_canvas').slideDown('slow');
}
Now, I want to take an Array of users and show mutiple marker on the map, so suppose that I no longer have #profile but #profile_array, and each of them have to be represented by a marker on the map. How do you think could I change the code above in order to achieve what I want ?
Tnx