# \[FEATURE-723\] Perspective map GeoJSON doesn't accept style **URL:** \ **Category:** Ignition Early Access\ **Created:** [October 4, 2020, 7:24pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354 "2020-10-04T19:24:45Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [October 4, 2020, 7:24pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/1 "2020-10-04T19:24:45Z")
Hi The perspective map JeoJSON property doersn’t accept any style and I stuck with default blue color for all type of objects(point, polygon,…) Is there any workaround the change default theming of it? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c1cda1cbbfa05247b153a539e5c5af2c62fc77e2.png) ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [October 5, 2020, 3:22pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/2 "2020-10-05T15:22:00Z")
The `style` key should work - try just `color` as the inner key value, per the docs? [https://leafletjs.com/examples/geojson/](https://leafletjs.com/examples/geojson/) ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [October 6, 2020, 3:48am UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/3 "2020-10-06T03:48:40Z")
Unfortunately it doesn’t work. As the image shown I test it for both Point and Polygon. Please add a ticket to fix it. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/2/e2745b6ba363f552eb83272325cdee2d80135fc1.png) ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [October 6, 2020, 4:09pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/4 "2020-10-06T16:09:01Z")
Okay. We’ll see what we can do. Feature ticket created. ---
**Author:** ![jgranada](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@jgranada](https://forum.inductiveautomation.com/u/jgranada)\ **Post date:** [June 22, 2021, 12:57pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/5 "2021-06-22T12:57:58Z")
Hi, Are there news about this ticket ?? Thanks ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [June 22, 2021, 1:35pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/6 "2021-06-22T13:35:14Z")
As long as I know nothing happen yet in 8.1.7. Also consider this: the new vectorClick event doesn’t work for jeojson so you may need this feature. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [August 6, 2021, 11:58am UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/7 "2021-08-06T11:58:01Z")
Any update on this feature? ---
**Author:** ![jgranada](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@jgranada](https://forum.inductiveautomation.com/u/jgranada)\ **Post date:** [September 28, 2021, 11:19am UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/8 "2021-09-28T11:19:34Z")
any update? ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [October 5, 2021, 2:24pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/9 "2021-10-05T14:24:30Z")
Hi Yusef, Any update on this feature? We prefer something like this method so we have a style for each element. ```auto L.geoJSON(states, { style: function(feature) { switch (feature.properties.party) { case 'Republican': return {color: "#ff0000"}; case 'Democrat': return {color: "#0000ff"}; } } }).addTo(map); ``` Also, I find two problems: As I check, clicking on the GeoJSON vector on the map doesn’t generate any onVectorclick event. It is very handy if we have this option too. The GeoJSON does not update in the map when is updated new value by script The JeoJSON is very light and use a lot in ArcGIS API response, so it is much faster to consume it in leaflet. ---
**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\ **Post date:** [February 8, 2022, 4:09pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/10 "2022-02-08T16:09:00Z")
Hi, Any updates? 🙂 Ignition version 8.1.14, still not possible to change the style of e.g. a LineString feature. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [February 8, 2022, 4:15pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/11 "2022-02-08T16:15:48Z")
Wait a little bit it is coming in 8.1.15 ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [February 8, 2022, 4:50pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/12 "2022-02-08T16:50:09Z")
It should already be part of 8.1.14. Although, you'll want the latest nightly that fixed a regression related to missing position properties in vector and marker click events. We also added some other features we hope you'll find useful. # Summary of changes: The configuration possibilities of the Map components GeoJSON layers has been expanded to allow style options for GeoJSON feature objects. A feature object has a "type" property with a value of "Feature". If you wish to familiarize yourself with the GeoJSON schema specifications, you can find them [here](https://datatracker.ietf.org/doc/html/rfc7946). The default schema of Polygon, Polyline, Rectangle, and Circle layers has been changed to align with how GeoJSON features are configured, and to help make configuration more straight forward. The vector and marker click events now get passed a dictionary parameter called "properties". ### GeoJSON layer - A `styleOptions` property can be added to configure style related options of feature objects - GeoJSON feature objects that are rendered on the map are subscribed to click events, triggering vector and marker click events - The `properties` member object of a feature object is a supplied parameter to vector and marker clicked event handlers - `Point` feature objects, which Leaflet renders as markers by default, accept special configuration The Map components GeoJSON layers are not meant to be modified directly via the property editor. It is the expectation that designers will make use of an HTTP binding and a map transform to add these configurations as foreign members (object member properties not part of the GeoJSON schema spec) to their layers and features that we process and pass along to the Leaflet API. Here is an example of a map transform on the returned response of an HTTP binding: ```` ``` def transform(self, value, quality, timestamp): from com.inductiveautomation.ignition.common.script.adapters import PyJsonObjectAdapter from org.python.core import PyArray # This function is how the Map component and Leaflet traverses and determines if an GeoJSON object qualifies as a Feature object. It is generic. If you know # what the layer looks like, i.e. a FeatureCollection of Point objects, you definitely don't need this. def walkFeatures(geojson, operate): features = geojson if isinstance(geojson, PyArray) else geojson['features'] if isinstance(geojson, PyJsonObjectAdapter) and isinstance(geojson['features'], PyArray) else None if features: for idx in range(len(features)): feature = features[idx] if isinstance(feature, PyJsonObjectAdapter): if feature.has_key('features'): walkFeatures(feature['features'], operate) elif feature.has_key('geometry') or feature.has_key('geometries') or feature.has_key('coordinates'): operate(feature) elif isinstance(geojson, PyJsonObjectAdapter): if feature.has_key('geometry') or feature.has_key('geometries') or feature.has_key('coordinates'): operate(geojson) # Operates on a feature, in this example, all of the features of this layer are expected to be Point objects, which we configure as Leaflet markers def operateOnFeature(feature): if isinstance(feature, PyJsonObjectAdapter): marker = { 'render': 'icon', 'icon': { 'path': 'material/location_on', 'size': { 'width': 36, 'height': 36 }, 'color': '#9bfa03' } } if feature.has_key('properties'): properties = feature['properties'] LOCATION_TYPE = properties.get('LOCATION_TYPE') LOCATION_NAME = properties.get('LOCATION_NAME') ADDRESS_LINE1 = properties.get('ADDRESS_LINE1') if LOCATION_TYPE == 'Headquarters': marker['icon']['color'] = '#ff0000' marker['tooltip'] = { 'content': { 'text': LOCATION_NAME } } marker['popup'] = { 'content': { 'text': properties } } feature['marker'] = marker walkFeatures(value, operateOnFeature) return value ``` ```` #### Polygon, Polyline, Rectangle, and Circle layers - The default schema of vector Polygon and Polyline objects has been altered to allow specifying a `name` and `properties` property which is supplied as a parameter to click event handlers. Previous schema shapes are still accepted. For example, - `name` and `properties` properties where added to `circle` and `rectangle` vector schemas - The `name` property which existed at the layer level of vector objects has been hidden from the schema, in exchange for individual object level specifying of `name` (see above). To prevent regression, the name that was defined on the layer will be used if the name defined on the vector object is empty or undefined. To create a basic GeoJSON layer, you can use this [mapping tool](https://geojson.io/). For real world example datasets, see [data.gov](https://catalog.data.gov/dataset?_res_format_limit=0&res_format=GeoJSON). Beware, these datasets can be quite large. ### Other changes - We now supply the true lat, lng coordinates of an element when a vector or marker is clicked. The true coordinates are derived directly from click event data, instead of being initialized from configuration. The change is a result of realizing that it is possible to make a marker draggable through configuration, and as such initializing coordinates from configuration would present incorrect data. - Configuration of objects is now more flexible. Any additional configuration is merged and forwarded directly to the Leaflet API. This is an advanced feature, so use with care. Its purpose is to prevent having to submit a request for a property listed in the API, on say, a marker object, and block a designer's work until that feature is finally added. For example: on a marker object you should be able to make a marker draggable by simply adding the draggable property and setting it to true, as outlined in the Leaflet documentation. - Changes to the configuration of a GeoJSON layer will result in that layer being redrawn. We detect changes by performing a deep equality comparison on current layers and previous layers. An approach mostly unique to GeoJSON layers only. Leaflet is a low level JS library, and as such requires some arm twisting to work nicely with React. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [February 8, 2022, 7:15pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/13 "2022-02-08T19:15:55Z")
Hi @ynejati Do we have support vector click for GEOJSON as well? ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [February 8, 2022, 8:04pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/14 "2022-02-08T20:04:21Z")
Yes, see the write up above. ---
**Author:** ![chris.morris](https://avatars.discourse-cdn.com/v4/letter/c/57b2e6/32.png) [@chris.morris](https://forum.inductiveautomation.com/u/chris.morris)\ **Post date:** [February 8, 2022, 9:24pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/15 "2022-02-08T21:24:01Z")
Are we able to pull in multiple GeoJson sources from multiple URLs or should those be combined somewhere externally and called from one URL? EDIT: Second question – When the http binding has polling enabled, every time it polls any currently open popups will get closed and the markers flicker. Is there anyway to prevent a complete redraw? I have been using this on a non-Ignition based map as a Leaflet plugin ([https://github.com/perliedman/leaflet-realtime](https://github.com/perliedman/leaflet-realtime)) and it only redraws the things that change before refreshes, so you can animate cars driving or bring in real time values that look more like a traditional HMI. ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [February 9, 2022, 3:08pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/16 "2022-02-09T15:08:01Z")
You can configure multiple GeoJSON layers, if that’s what you’re asking? As for the flickering, we are aware. It was necessary to introduce these changes first. That’s an interesting plugin. Most of them work well when you have complete control of the data being fed to the map API. Still, it’s something to ponder. Thanks for sharing. ---
**Author:** ![chris.morris](https://avatars.discourse-cdn.com/v4/letter/c/57b2e6/32.png) [@chris.morris](https://forum.inductiveautomation.com/u/chris.morris)\ **Post date:** [February 9, 2022, 6:33pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/17 "2022-02-09T18:33:22Z")
> [@ynejati](#): > > You can configure multiple GeoJSON layers, if that’s what you’re asking? That is my question. It doesn't seem to work. If I make a new layer next to the existing "geoJSON" layer called "geoJSON2" it does not work and I get invalid key errors: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/f/9f30c734f3f18a500d425e9c1536515215837581.png) If I delete the existing geoJSON layer and rename geoJSON2 to just geoJSON it begins working. Looking at the transform code you provided, I don't see anywhere that has the layer name hardcoded to "geoJSON" that I am overlooking. Is there something else I am misunderstanding in regards to a second layer? ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [February 15, 2022, 3:59pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/18 "2022-02-15T15:59:33Z")
I’m guessing you figured this out already, but your GeoJSON layers go in `other.geoJSON`. Similar to how all the other layers work. If you hover over the property in the Property Editor you should get the tooltip explaining this. Hope that helps. ---
**Author:** ![chris.morris](https://avatars.discourse-cdn.com/v4/letter/c/57b2e6/32.png) [@chris.morris](https://forum.inductiveautomation.com/u/chris.morris)\ **Post date:** [February 15, 2022, 4:14pm UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/19 "2022-02-15T16:14:01Z")
> [@ynejati](#): > > I’m guessing you figured this out already, but your GeoJSON layers go in `other.geoJSON` . Similar to how all the other layers work. If you hover over the property in the Property Editor you should get the tooltip explaining this. Hope that helps. Yeah, I have my GeoJSON layers in GeoJson in the screenshot. Other.geoJSON[geoJsonHTTPBindingDataHere] Other.geoJSON2[geoJsonHTTPBindingDataHere] But the GeoJSON2 layer does not work, but the first does. Should the structure be this instead? Other.geoJSON.Layer1[geoJsonHTTPBindingDataHere] Other.geoJSON.Layer2[geoJsonHTTPBindingDataHere] ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [April 25, 2024, 6:32am UTC](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354/20 "2024-04-25T06:32:59Z")
Hi @ynejati Is it possible to add the className property in the Geojson styleOptions so we can pass our style class? Right now I can do it by modifying .leaflet-interactive class but this causes all polylines in the map effected by it what I want to specific selector like this and only target polyline object I want by passing the class name in styleOptions: ```python .psc-power .leaflet-interactive{ filter: drop-shadow( 0 0 8px white) } ``` ```python styleOptions: { "className": "power" "stroke": true, "color": "", "weight": 1, "opacity": 1, "lineCap": "inherit", "lineJoin": "inherit", "dashArray": "", "dashOffset": "", "fill": true, "fillColor": "", "fillOpacity": 1, "fillRule": "inherit", "interactive": true } ``` [Next page](https://forum.inductiveautomation.com/t/feature-723-perspective-map-geojson-doesnt-accept-style/39354.md?page=2)