In my GEOJSON data layer I have a set of about 20 regions. Each Feature has a GeometryCollection with two geometries: a Polygon to define the region, and a Point that gives the centre of the region.
I want the Polygons to be invisible, but show the Points on the map as markers.
Additionally, I want to be able to set the region markers as visible or invisible depending on zoom level.
Is it possible to show just the Points on the map, and set them visible / invisible separate to the Polygons? I know I can add them to the map as markers the normal way, e.g.
new google.maps.Marker(etc)
but ideally I want to use the stock data layer so I can turn the markers off and on without looping through an array.
GEOJson is basically a "features collection", which means it can contain various features (and feature types: Point, MultiPoint, Polygon, etc.).
In your use case, you could have your Polygons and your points as separate features. You can then do various things with each feature separately. You can remove a feature, or you can override its style.
You can use map.data.getFeatureById('your_feature_id'); then use one of the available methods of the Data layer, for example remove or overrideStyle.
As an example, please check this fiddle that demonstrates how you can add a few points (MultiPoint) and a Polygon to the Data layer, then hide/show only one feature.
Hope this helps.
Related
I have an app that displays a world map using amCharts 4, in which each continent is to be colored differently and then there are some bubbles places in certain countries to show some data.
For the map, I have an object that lists all countries by the country code key. Then I have an API that returns the data regarding which countries have some values associated with them that should be displayed on the map.
For the purpose of having differently colored continents ( with country borders ) I created a different series for each continent and colored it accordingly. However due to the data structure, this wouldn't let me place the bubbles, so I have another series, beneath all the colored ones, of a full world map.
For the bubbles to be places, I've followed an example from the demos, and calculate the visual center for each country.
My problem is that this has become very resource-intensive, to the point where sometimes, randomly, the map fails to build properly resulting in all the bubbles being places on the top left corner. I was wondering if there are any ways to improve this performance, namely:
- An easier way to calculate the visual center, or get the coordinates for such.
- Some way to color each continent without having to rely on a separate series
If you don't need country borders, I recommend the following steps:
1) Create a map with countries and calculateVisualCenter = true set on country series.
2) When map is build, loop through all polygons and save visualLongitude/visualLatitude of each into some object, output the result in console.
3) Use the coordinates in your actual map for bubble positions.
Here is a quick demo where the coordinates are saved and logged to console:
https://codepen.io/team/amcharts/pen/bGdQXzE
I'm trying to return multiple features from two layers from a user click (one feature on each layer)?
I'm using openLayers 2.12. I have 2 vector layers containing polygons, and a container layer containing both.
When clicking where both layers contain a feature, only the layer2 feature is returned.
How do I also get the feature at layer1 of the same position?
Is there away to get a feature from a specific layer at a viewport position?
Explanation: the SelectFeature-Control uses the layers getFeatureFromEvent()method to find one feature for a click, hover, touch etc. event. If SelectFeature controls more than one layer, it glues the layers to a virtual single layer, therefore you get at max one feature in this case, too.
Your 1st question: if you want to select more than one feature, you can use the SelectFeature's selectBox(OpenLayers.Bounds) method: if you create a small Bounds from your position and call selectBox(), all features from all layers controlled by your SC intersecting your bounds get selected.
Your 2nd question: you may make up an OpenLayer.Event from your viewport position and call the getFeatureFromEvent() for the specific layer. This will of course return only one feature, even if a lot features are overlapping at your position.
Hope that helps a little.
I'm writing a web-site to show different isochrone over city-map:
http://130.192.68.210:8080/citychrone/citychrone.html
I have several MultiPolygon GeoJSON layer in my Leafletjs library based project. I would like that when a layer overlap another only one of this can be visible in the overlapping region. Each of this layer has an opacity less than 1, so is not enough to set the ordering of the layer on the map. I'm wondering if it is possible to give a priority to layer, so when they overlap just one of them is visible.
Another possibility is to make one layer an "hole" of another layer, it is possible?
Turfjs is great for doing geometric operations like this in Javascript.
In your case, you can create holes in a polygon by "erasing" parts of it, using turf-erase: http://turfjs.org/static/docs/module-turf_erase.html. The example on that page shows something similar to what you want to do.
I realize there are some conceptual gaps in my knowledge—I'm not 100% clear on how everything fits together in Mapbox. Hopefully someone can set me straight and help me achieve what I'm trying to do.
Our client is a multinational corporation with locations divided into global regions: North America, South America, Europe & Africa, Asia Pacific, etc.
What they want is for the initial map view to be a zoomed-out world map. When each of these individual regions are moused over, the countries belonging to that region will be highlighted, a label will be displayed with the name of the region, and clicking will zoom the viewport to center/display the region.
The problem is that there is no concept of a region in the map, and I'm not sure how to add one programatically.
The underlying country map was created and styled by a designer using TileMill. It uses the Natural Earth country map. When I look at the project in TileMill and inspect the layer "features", it appears that the shapefile has a list of the individual countries with some associated metadata. So far so good.
Ideally, on the client side, I would have a list of countries belonging to each region. When the user mouses over an individual country, I'll figure out what region it belongs to, iterate through the country list and apply an effect (like opacity) to highlight the region.
The problem is, I can't figure out how to get the country metadata in the TileMill file for whatever country is currently being moused over. Is it even possible to attach events and access the features added in TileMill?
FYI: an alternate approach I tried was adding this map data at runtime. I was able to attach events to GeoJSON features, but the granularity of the map is WAY lower than the underlying map, so it doesn't line up correctly at higher zoom levels.
The problem is that there is no concept of a region in the map, and I'm not sure how to add one programatically.
Okay, so the fundamental thing to understand here is the difference between interactivity you add in TileMill and interactivity via GeoJSON, in Mapbox.js.
TileMill supports raster interactivity based on UTFGrid, and exports tiles. It can handle high levels of detail and thousands of features, but since the geo data itself is not transferred to your browser, you can't do hover interactions like highlighting data - you can only open tooltips and popups
Mapbox.js/Leaflet support vector interactivity. They can handle much lower levels of detail and amounts of data. But the geo data is transferred to your browser, so you can do hover interactions as well as adding tooltips.
I am using google map v3 javascript api, and I try to create the custom map type according to the guide at google.develper.
However I found that the map type only provide one layer while my custom map type should provide two layers just like the google.maps.MapTypeId.HYBRID which contains two layers - the SATELLITE and the Placenames.
So I wonder if this is possible?
BWT,I have ask question about maptype and layers here.
It seems that the map type are made up by layers, is this true?
In fact, my first question is solved by Michael Geary.
However, I meet new problems now, since it is still related to the custom maptype, so I update this post instead of create a new question.
Q2:
How about the maptypecontrol if I have more than one layers?
As you can see, the google.maps.mapTypeId.HYBRID have two layers —— the satellite and the labels.
So in the maptype control you will find this:
Note the Labels checkbox.
Now I have two layers for my custom maptypes-- base and the labels, how to make the labels layer can be toggled?
A custom map type defines a DOM element for each tile, as described here. That DOM element isn't limited to just a single image. You can have a <div> with any number of images and other elements nested inside it.
The hybrid map type is implemented with this approach. Here is a screenshot of the Chrome DOM inspector showing a single map tile in the hybrid satellite view:
As you can see, the <div> has two <img> children. The first one, served from khms0.googleapis.com, is the base satellite tile image. The second one, served from mts0.googleapis.com, is the labels and borders overlay tile with a transparent background. This is all just a single map type as far as the Maps API is concerned: the API only knows about the container <div>, not the images inside it.
The base map example in the Base Map Types section of the documentation illustrates the use of <div> elements as map tiles. You could use that as a starting point and add your <img> tiles inside the <div>.