converting my Google maps code over to Yandex maps.
I have a function which updates the markers (placemarks) icon on the map.
In google maps i can do:
var newImage = new google.maps.MarkerImage('img/presence/' + marker.state.toLowerCase() + '_map.png');
marker.setIcon(newImage);
I cannot find an equivilent method for setIcon in Yandex.
I can set the image at marker creation with:
var marker = new ymaps.Placemark(point, null, {
iconImageHref: 'img/presence/'+state+'_map.png',
iconImageSize: [20, 20],
iconImageOffset: [-10, -20]
});
Any idea how i can update the icon image?
You can update options of existing placemark (marker):
marker.options.set('iconImageHref', 'img/newImage.png');
Related
I built a world map with a drop down menu that changes the zoom level: see fiddle
This is my function:
$('#func').change(function () {
var chart = $('#map').highcharts();
var v = $(this).val();
if(v == "1") {
$('#map').highcharts().mapZoom(10);
$('#map').highcharts().mapZoom(.4);
chart.redraw();
}
});
In addition I want to change the position of the map. How can I change latitude and longitude after a value is selected?
Using the mapZoom method you can change the current map view. You only have to add the second and third argument to that method. This is the X and Y position of the new zoom centre.
For calculating that value from latitude/longitude you might use the fromLatLonToPoint method.
In the demo below I implemented it for Europe.
API:
https://api.highcharts.com/class-reference/Highcharts.Chart#mapZoom
https://api.highcharts.com/class-reference/Highcharts.Chart.html#fromLatLonToPoint
Live demo:
https://jsfiddle.net/BlackLabel/xs8nLgho/
I'm using the ArcGIS 100.6 iOS SDK and am populating the map with markers on a Graphics Overlay Layer
whose locations are stored in a database common to all users of my application. Each marker is stored in a unique record and each record contains the Latitude & Longitude of the marker.
When the App is launched it reads the location of all markers in the database and adds each one to the Graphics Overlay as shown below:
let areaMarker = AGSPictureMarkerSymbol(image: UIImage(named: "CustomMarker")!)
let areaMarkerLocation = AGSPointMakeWGS84(y ?? 0.0, x ?? 0.0)
let markerIcon = AGSGraphic(geometry: areaMarkerLocation, symbol: areaMarker, attributes: >["marker": markerKey])
self.overlay.graphics.add(markerIcon)
As shown above, each marker is assigned an attribute "marker:markerKey" that is the unique database record number (key) where the marker location information is stored and serves as the marker ID.
Once the initial markers are added to the Overlay, the App "Listens" to the database for the following events:
A new marker is added
An existing marker is moved to a new location
An existing marker is deleted
When a marker is moved or deleted the database listener is notified and passed the record number (key) of the marker that was moved (or deleted). If the marker was moved, the record will then contain the new Latitude & Longitude information.
I have experimented with reading the graphics overlay and determined that it is a Collection contained in a NSMutable Array. I can read all attributes as follows:
let graphicsCollection = self.overlay.graphics.mutableArrayValue(forKey: "attributes")
print(graphicsCollection)
The result is:
(
{
marker = "-KlRW2_rba1zBrDPpxSl";
},
{
marker = "-Lu915xF3zQp4dIYnsP_";
}
)
I can do the same for "geometry" and get the array of AGSPoints:
let graphicsCollection = self.overlay.graphics.mutableArrayValue(forKey: "geometry")
print(graphicsCollection)
The result is:
(
"AGSPoint: (-117.826127, 44.781139), sr: 4326",
"AGSPoint: (-112.056906, 33.629829), sr: 4326"
)
I have been unable to determine how to get the "index" of the attribute array (e.g. marker "-KlRW2_rba1zBrDPpxSl" above should have an index of [0]) so I can then use that "index" to access the appropriate AGSPoint and update the Latitude & Longitude or remove the marker.
Thanks in advance for the help.
If you want to move the marker (i.e. an AGSGraphic) you'll want to get the AGSGraphic itself and modify the geometry property. I think that by jumping to the "geometry" in your mutableArrayValue() call you're kind of shooting yourself in the foot a bit.
I would tackle it this way:
let searchMarker = "-KlRW2_rba1zBrDPpxSl"
let newLocation = AGSPointMakeWGS84(40.7128, -74.0060) // NYC
if let graphic = (overlay.graphics as? [AGSGraphic])?.first(where: {
($0.attributes["marker"] as? String) == searchMarker
}) {
// Move the graphic
graphic.geometry = newLocation
// Or remove the graphic
overlay.graphics.remove(graphic)
}
I want to hide the marker after the zoom level reach 17, someone suggested I use clear method, but the issue with it that I have different marker that will show after some event so clear is not going to work any idea how can I made this possible?
To remove a specific marker
myMarker.map = nil
as far as I know there are no definite references to hiding markers, but you can manipulate marker data displayed on the map #CMIIW
as an example
var markers: [GMSMarker] = []
var tempMarker: [GMSMarker] = []
if zoom == 17 {
// TODO: Create tempMarker filter from markers
} else {
// TODO: Create tempMarker filter from markers
}
// TODO:
// mapView.clear()
// Mapview show markers from tempMarker
iOS Swift Google Maps SDK showing markers at specific zoom level?
//To delete
marker.map = nil
//to hide
marker.opacity = 0.0
I have implemented cluster in google map and I want to update the map with the markers based on the checkbox selection.
I want to remove the marker from the cluster based on the custom property that I have set in the marker.
var clust = new MarkerClusterer(map, markers, {maxZoom: 14});
How can I do this? Please help me.
Thanks in advance.
For each marker to remove:
clust.removeMarker(marker);
For each Marker to add:
clust.addMarker(marker);
You need to set map null for current markercluster and then create new marker array on the basis of property you want then create new markercluster again and set to map.
var clust = new MarkerClusterer(map, markers, {maxZoom: 14});
on update property
clust.setMap(null)
var newclust = new MarkerClusterer(map, newmarkers, {maxZoom: 14});
newclust.setMap(mapobject)
I'm new to OpenStreetMap and I've been browsing the wiki and the net and I can't seem to find a tutorial anywhere but I've seen examples on the net.
Basically I want to generate my own OpenStreetmap and plot markers taking the latitude and longitude from a MySQL database and plotting them on my map. When the user clicks on a mark I'd like to have a popup. Basically I want this http://code.google.com/apis/maps/articles/phpsqlajax.html but for OpenStreetMap and not Google-maps.
Looks like they are using openLayer for map rendering. Here are some examples and api docs.
http://openlayers.org/dev/examples/
http://trac.osgeo.org/openlayers/wiki/Documentation
To accomplish this, you need to figure out the javascript for presenting markers on a "slippy map" interface.
OpenLayers is the name of a popular javascript library. It's free and open source. It's used to display a slippy map on the OpenStreetMap.org homepage, and various other sites around the web. It's often confused with OpenStreetMap itself, or people mistakenly get the impression that you must use OpenLayers if you want to embed OpenStreetMap maps on your site. Not true. There's lots of alternative javascript libraries for displaying a slippy map
...including the google maps API! You can set up a google maps display, but show OpenStreetMap "tile" images instead of google tiles. See Google Maps Example. This has the advantage of code compatibility, meaning you could follow through google maps tutorial you've linked there, but then drop in a cheeky bit of code to specify OpenStreetMap as the tile layer.
This has the disadvantage of showing an big evil google logo, and requiring an even more evil google maps API key, so all the cool kids are using OpenLayers.
There's various examples of using OpenLayers on the OpenStreetMap wiki. The "OpenLayers Dynamic POI" example shows the use of database for markers (although that example is a bit convoluted). Another popups example on my site
Hope that helps
// Sample code by August Li
// Modified by Tom Moore to work with SQL
var zoom, center, currentPopup, map, lyrMarkers;
var popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
"autoSize": true,
"minSize": new OpenLayers.Size(300, 50),
"maxSize": new OpenLayers.Size(500, 300),
"keepInMap": true
});
var bounds = new OpenLayers.Bounds();
var lat=36.287179515680556;
var lon=-96.69170379638672;
var zoom=11;
var lonLat = new OpenLayers.LonLat(lon, lat).transform(
new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
// begin addMarker function
// info1 I was going to use to add a tooltip. Haven't figured out
// how to do that in OpenLayers yet :( Someone who knows share that with us
// iconurl is the url to the png file that you want to use for the icon.
// you MUST call addMarker at least once to initialize the map
function addMarker(lat, lng, info, info1, iconurl) {
// First check to see if the map has been initialized. If not, do that now ...
if (map == null) {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 19,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
};
map = new OpenLayers.Map("map", options);
map.addControl(new OpenLayers.Control.PanZoomBar());
var lyrOsm = new OpenLayers.Layer.OSM();
map.addLayer(lyrOsm);
lyrMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(lyrMarkers);
//add marker on given coordinates
map.setCenter(lonLat, zoom);
zoom = map.getZoom();
}
var iconSize = new OpenLayers.Size(36, 36);
var iconOffset = new OpenLayers.Pixel(-(iconSize.w / 2), -iconSize.h);
var icon = new OpenLayers.Icon(iconurl, iconSize, iconOffset);
var pt = new OpenLayers.LonLat(lng, lat).transform(
new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
bounds.extend(pt);
var feature = new OpenLayers.Feature(lyrMarkers, pt);
feature.closeBox = true;
feature.popupClass = popupClass;
feature.data.popupContentHTML = info;
feature.data.overflow = "auto";
var marker = new OpenLayers.Marker(pt, icon.clone());
var markerClick = function(evt) {
if (currentPopup != null && currentPopup.visible()) {
currentPopup.hide();
}
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
lyrMarkers.addMarker(marker);
}
// end addMarker function
Best regards! I hope this helps someone who needs this to work...