Show geojson polygons on Google map
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a map that looks like this

https://db.tt/CYZlFQSO

I need to be able to put some polygons on top of it to show parking availability , ideally we can use geojson for this so we have a standard data structure. the goal of the output needs to look like this

https://db.tt/ipwUtEOk

Green, red, yellow over the parking areas of the map. for testing purposes if your submission can contain a couple of each color we should be able to take it from there.

In my screenshot of the final output you will notice there is a marker in the center of the parking areas (P) and it is also colored, I am hoping we can have some js just plot this in the center of the polygon dynamically? and inherit the state of the polygon it is in. This way we don't need to manually worry with setting these and placing them. I found some stackoverflows on this so it seems possible to find the center of a polygon a few ways.

here is my current code you can use as a starting place to maintain the theme
https://jsfiddle.net/57emhd1z/

Ideally your submission is in jsfiddle but it is not required.

Do you have the GeoJSON objects?
tomtoump over 3 years ago
I do not, was just hoping to use that as a standard.
Qdev over 3 years ago
So, is defining the coordinates of each parking area part of the bounty?
tomtoump over 3 years ago
yes but...I just need a couple of examples, I don't expect it to be perfect or super detailed. I am more after the solution. I can spend more time getting a lot more accuracy later.
Qdev over 3 years ago
awarded to tomtoump

Crowdsource coding tasks.

1 Solution

Winning solution

Check this fiddle which loads this GeoJSON file.

Each parking area is represented with one "Point" for the parking icon and one "Polygon" for defining the area. I found that simpler than having to find dynamically the center of every polygon each time.

Every Point and Polygon have one property named color. This is used for the Polygon fill color and you could use it to get the url for the Point icon.

EDIT: If you only want to include the Polygons and dynamically position the markers you have to add this code:

google.maps.event.addListener(map.data, 'addfeature', function(e) {
  var bounds = new google.maps.LatLngBounds();

  e.feature.getGeometry().getArray().forEach(function(path) {
    path.getArray().forEach(function(latLng) {
      bounds.extend(latLng);
    })
  });

  var color = e.feature.getProperty('color');

  new google.maps.Marker({
    map: map,
    position: bounds.getCenter(),
    // icon url should be depended of color, for example 
    // icon: 'https://example.com/icons/parking_' + color + '.png'
    icon: 'http://101seaport.com/_ui/location/parking_icon.png'
  })
});
Tom this is great. How do i change the color of the point in the polygon? right now they are all blue
Qdev over 3 years ago
It's a png, so you'll have to change the url in the icon property (line 50 - read my comment).
tomtoump over 3 years ago
to keep things in vector form, i have drawn these real quick is there a way to incorporate these without another http request? https://www.dropbox.com/s/6u1f8w17vugeie8/color-parking.zip?dl=0
Qdev over 3 years ago