👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Discussion about implementing geojson into a plugin using Google Maps or Leaflet

16 replies
Last updated: Apr 7, 2020
Espen Hovlandsdal
do you take requests for features in a plugins you have made? 🙂
Apr 7, 2020, 6:41 PM
Sure? 🙂
Apr 7, 2020, 6:42 PM
🙂 I’m looking on how to implement geojson (for polygon) into my studio, hopefully using the google-maps-input plugin. and I think by adding the drawing layer from https://developers.google.com/maps/documentation/javascript/drawinglayer#overview this could be achieved. In addition to the possibility to remove points https://developers.google.com/maps/documentation/javascript/examples/delete-vertex-menu
Apr 7, 2020, 6:45 PM
maybe if this could be activated on a geojson field or something, to seperate it from geopoint
Apr 7, 2020, 6:46 PM
Im sure its a lot to consider and quite some work to implement correctly, but one can only ask and hope that is a interesting challenge 🙂
Apr 7, 2020, 6:50 PM
Oh interesting. That would certainly be a possibility, but I'm thinking it might make sense to create a separate input component for it, given it has different constraints and would need a different schema type.
I have actually implemented a fair amount of this in a side project I have going (screenshot attached) but it's using Leaflet with Mapbox for tiles.
Apr 7, 2020, 7:12 PM
I've not yet implemented the actual editing of the path, but I have it on my list of things that I want to add (sometimes the GPS gets a little spotty and the paths are off, so I'd like to correct the path manually)
Apr 7, 2020, 7:13 PM
I also kind of like working with Leaflet and the surrounding tools better than Google Maps - I've already got things like path "normalization" in place (reduces the number of points to a smaller subset if they are very similar/follows a straight line)
Apr 7, 2020, 7:15 PM
The schema type for this particular case is simply:
{
  name: 'geoPath',
  title: 'Geo path',
  type: 'object',
  fields: [
    {
      name: 'points',
      title: 'Points',
      type: 'array',
      of: [{type: 'geopoint'}]
    }
  ]
}
And then I apply a custom input component to it, currently only for
showing the path
Apr 7, 2020, 7:16 PM
While we do theoretically support storing multidimensional arrays, there isn't a good way to query it currently, and the Sanity schema will/should complain if you try to put an array in an array, so I've opted for "close to GeoJSON but not quite GeoJSON"
Apr 7, 2020, 7:18 PM
🙂
Apr 7, 2020, 7:19 PM
That looks really cool
Apr 7, 2020, 7:19 PM
leaflet vs google maps is the same in the studio bit for my part. I assume its not much different output with regard to how precise they are
Apr 7, 2020, 7:22 PM
For my particular usecase i wouldn’t query the data inside the geojson, just the geojson object in itself. Would it be way too dirty storing it stringified?
Apr 7, 2020, 7:28 PM
hmm, actually this way of storing it would be better. can easily be converted to geojson before consumption
Apr 7, 2020, 7:30 PM
Stringified is justd a bit of a pain to work with, I'd rather be able to use the Sanity patch mutations and stuff 🙂
Apr 7, 2020, 8:10 PM
This is what I was hoping to use for editing operations, for reference: https://github.com/Leaflet/Leaflet.Editable
Apr 7, 2020, 8:11 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?