I am using kml file to draw polygons in google map. I am setting click events for those polygon which is working. Now I want the clicked polygon to be highlighted. I had tried the setOption() method, but it didn't work. Is it possible to change the color of polygon on clicking it?
If you are using KmlLayer (a guess), you can't change the properties of the Polygons. If you use a third party KML parser like geoxml3 or geoxml-v3 to render the polygons as native Google Maps API v3 objects you can change their properties (but whether the performance is acceptable will depend on how complex your KML is). You can also dynamically change Polygons in tiles rendered using FusionTablesLayer (import your KML into a Fusion Tabel).
Example changing the color of Polygons from KML rendered using geoxml3 on mouseover
If you are using KmlLayer (a guess), you can't change the properties of the Polygons. If you use a third party KML parser like geoxml3. Here is a link to that.. http://developers.cloudmade.com/projects/web-maps-api/examples/kml-and-geo-rss
Related
I'm using mapbox-gl-js library (soon maplibre-gls-js) to render Maps from HERE Vector Tiles API using the styles from https://github.com/apollo-mapping/ap-tilezen-mapbox-styles
I saw and tried this example from HERE: https://developer.here.com/documentation/examples/vector-tiles
where they offer their own style that can be used with the mapbox library:
https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey=
But I have not found any documentation on the styles endpoint.
Are there more styles available I can choose from? This "berlin" style is a bit too dark for my taste.
No, we don't have more styles for Mapbox render engine therefore you need to create/rework you own.
The defined style on https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey= should be compatible with Mapbox Style Specification https://docs.mapbox.com/mapbox-gl-js/style-spec/
If you open this https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey= directly then you can see 'layers' property that compatible with the description on https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/
E.g. each layer object has property 'id' that is mapped to Mapbox layer id and layer object has a property 'source-layer' layer id to use from a HERE Vector tile source (description on https://developer.here.com/documentation/vector-tiles-api/dev_guide/topics/layers.html and https://developer.here.com/documentation/vector-tiles-api/dev_guide/topics/layers.html#tile-layers).
To find layer ids of Mapbox use this description https://docs.mapbox.com/help/glossary/layer/#finding-layer-ids
To find layer ids of HERE Tiles use it https://enterprise.here.com/map-style-editor/
Using 'filter' property https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#filter for define an expression specifying conditions on source (HERE Vector Tile) features.
Basically you need to rework color styles in the https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey= and save it to your's internet resources
Background
I am using the Google Maps Javascript API to create a map for a website. I want to be able to edit it with a GUI, and have changes automatically update the public map.
I can accomplish this via Google's MyMaps. I've created a map using it, and then exported a NetworkLink KML file. I read that KML file into my JS API map as a KML layer.
Problem
I'm not sure how to interact with the data once it is in the JS API map. I need to style polygons as different colors, and use functions such as containsLocation().
Current Code
KML File
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>Lighting</name>
<description><![CDATA[A map showing all lighting reps.]]></description>
<NetworkLink>
<name>Lighting</name>
<Link>
<href>http://www.google.com/maps/d/kml?forcekml=1&mid=zUHNjsLRU3p0.k_6G1fwoLGr4</href>
</Link>
</NetworkLink>
</Document>
</kml>
JS API Code
var gMap = new google.maps.Map(element, opts);
var kmlLayer = new google.maps.KmlLayer({
url: 'data.kml',
map: gMap
});
Working Example (Plunker)
Question
Can I edit these polygons, changing colors, etc? How would I do that?
The only way (currently) to modify the colors of objects defined in a KmlLayer is to change the KML.
Other options:
use a third party KML parser (like geoxml3 or geoxml-v3) that render the KML using native Google Maps Javascript API v3 objects. Note that these third party parsers are subject to the same domain restriction for XmlHttpRequest, so the KML must be on the same domain as the web page or served through a proxy.
example using geoxml3
import the KML into a FusionTablesLayer, which can be styled dynamically.
We have been using KML to allow clients to upload Layers to a Google Maps based App. We are trying to replace KML with geoJSON, and all is fine with the exception of styles.
The style definitions in the KML files do not get included in the conveted geoJSON file (we have used a number of converters, but the one we are working with mainly is http://converter.mygeodata.eu/)
As you can see in the KML below, there is a style block there (purple box), but this just gets excluded from any generated geoJSON.
Does anyone know of a converter, or way of converting KML to geoJSON, that retains the style?
Thanks
Jason
In the end, I found that toGeoJson (http://mapbox.github.io/togeojson/) actually does convert the KML <style> node contents into the resulting geoJSON.
All the online tools seem to use ogr2ogr on the server side, which ignores the <style> as it isn't semantic, but toGeoJson has a go at it and so far does a good job.
I could then just access those properties, after the geoJSON was loaded, to apply the styles.
I am trying to add OpenLayers.Control.OverviewMap() to group of layers (geotiff with shp file) in Geoserver. Is there any way to automatically add this control to every map which I would like to display from Geoserver by OpenLayers? There already are some default control buttons like scale or navigations. I assume that this will require some changes in *js or other file in Geoserver, please let me know which one it will be.
I am trying to make a map that shows several information of a project. I have like 1000 points in Arcgis, each point have a html code that shows specific info of the points (names, location, 1 picture etc..). I export these points to a kml file, so I have the 1000 in a one kml file with all the info.
What I want to do is format all the markers of the kml file with api Google maps, (size, color etc...), so when I load the map in the web page I can play with size or color of the markers of the kml file. I haven’t found the procedure yet. I don’t know if I the issue well explained.
I mean which is the code to change the size and color of all markers of a kml file with API Google maps. Thanks.
You can't do that with the native Google Maps API v3 KmlLayer class. You could import your KML into FusionTables, overlay a FusionTablesLayer and style that dynamically or use a third party KML parser like geoxml3 or geoxml-v3 which parse the KML and render it using native Google Maps API v3 objects.