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
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 just want to convert the default projection of an Openlayers 3.9.0 from the default EPSG:3857 to EPSG:4326.
So I edited a basic code like
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = [-1.812, 52.443];
var proj = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'm'
});
var view = new ol.View({
center: center,
zoom: 6,
projection:proj
});
var map = new ol.Map({
loadTilesWhileAnimating: false,
loadTilesWhileInteracting:false,
target: 'map',
layers: [layer],
view: view
});
If center is like var center = [-1.812, 52.443]; it does not go in the UK, as is should be, it goes in the center of the map.
If I do like var center = new ol.geom.Point(-1.812, 52.443); I see no map at all. What am I missing here?
Thanks
You have two issues:
You should not instantiate the EPSG:4326 projection by yourself, it's done by OpenLayers 3. You get the projection by calling ol.proj.get('EPSG:4326').
The ol.source.OSM source loads it's tiles from services that only support EPSG:3857. Since it's a XYZ-based tilesource, you might actually get the map working (if the tilecoords are valid), but the layer will not be positioned correctly and still be in EPSG:3857. You can use EPSG:4326 as the view projection, but then you have to use a background map that supports it.
A working demo can be found in the official examples.
OL does not currently transform tiles, but that is being worked.
https://github.com/openlayers/ol3/issues/3785
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>
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);
})