Skip to content

feat: ability to read geojson polygon into initial drawing layer#70

Merged
jessicamcinchak merged 1 commit intomainfrom
jess/load-initial-polygon-for-drawing
Oct 27, 2021
Merged

feat: ability to read geojson polygon into initial drawing layer#70
jessicamcinchak merged 1 commit intomainfrom
jess/load-initial-polygon-for-drawing

Conversation

@jessicamcinchak
Copy link
Copy Markdown
Member

@jessicamcinchak jessicamcinchak commented Oct 24, 2021

This will enable us to "go back" to the DrawBoundary component in PlanX and load the site boundary that was originally drawn. The initial shape will load with the modification & snap interactions enabled so that you can alter it. The "reset" control will clear the layer and display the draw cursor anew, same as it works now. The drawing layer is still limited to one feature at a time.

Introducing two new optional properties (both assume drawMode is true/enabled):

  • drawGeojsonData: an object that accepts a single GeoJSON Feature with projection "EPSG:3857"
  • drawGeojsonDataBuffer: a number to control the extent of the map view, defaults to 100

Example implementation:

<body>
  <my-map zoom="18" maxZoom="20" drawMode />
  <script>
    const map = document.querySelector("my-map");
    map.drawGeojsonData = {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -0.12830883264541626,
              51.507844315947985
            ],
            [
              -0.12819081544876096,
              51.50762728992553
            ],
            [
              -0.12769192457199097,
              51.507712431026796
            ],
            [
              -0.12785017490386963,
              51.50795616741744
            ],
            [
              -0.12830883264541626,
              51.507844315947985
            ]
          ]
        ]
      }
    };

    map.addEventListener("ready", (event) => {
      console.log("map ready");
    });
    map.addEventListener("areaChange", ({ detail: area }) => {
      console.debug({ area });
    });
    map.addEventListener("geojsonChange", ({ detail: geojson }) => {
      console.debug({ geojson });
    });
  </script>
</body>

@netlify
Copy link
Copy Markdown

netlify Bot commented Oct 24, 2021 •
edited
Loading

✔️ Deploy Preview for oslmap ready!

🔨 Explore the source changes: 79f3384

🔍 Inspect the deploy log: https://app.netlify.com/sites/oslmap/deploys/617555a0a833ef0007a901b6

😎 Browse the preview: https://deploy-preview-70--oslmap.netlify.app

@jessicamcinchak jessicamcinchak requested review from a team and gunar October 26, 2021 08:18
gunar
gunar approved these changes Oct 26, 2021
View reviewed changes
Copy link
Copy Markdown
Contributor

@gunar gunar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome. Code looks good and it works. We probably need to bump minor version in package.json too right? Thank you!

@jessicamcinchak
Copy link
Copy Markdown
Member Author

jessicamcinchak commented Oct 27, 2021

@gunar thx for reviewing! have a couple changes queued for next minor release, so version bump to package.json & changelog notes are open over here in separate PR #71

@jessicamcinchak jessicamcinchak merged commit b44ef6d into main Oct 27, 2021
@jessicamcinchak jessicamcinchak deleted the jess/load-initial-polygon-for-drawing branch October 27, 2021 08:10
@jessicamcinchak jessicamcinchak mentioned this pull request Oct 28, 2021
Merged
@allbecauseyoutoldmeso allbecauseyoutoldmeso mentioned this pull request Oct 4, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@gunar gunar gunar approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jessicamcinchak @gunar