Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add line and polygon drawing support #176

Merged
merged 1 commit into from
Aug 14, 2024
Merged

Conversation

kochis
Copy link
Collaborator

@kochis kochis commented Jul 30, 2024

  • Add support for drawing lines and polygons
  • Support for polyline rendering
  • Introduces a new RadarFeature class for adding GeoJSON features to the map.

Usage:

// adding a polyline to the map
const polyline = 'iyeulAveaclCuVfw@aA|CuAlEgj@teBm@jBs@|BbBjA~XzRdFnDfBlA`A{C`@mA~h@icBfAmD`A{Cff@c|A|A{E|BZfJrAh[lEhC^dBThMdBnTtCd@LzBx@|BjA^RhZnUzBdB`BtAl\\zWvAjAlBzA|UjRfEhD`ClBhRfOlCxBjBxAhBxAxKzItNhL|BhBnB|Af]rXnB~A|AnAn[fWbAv@~ArAzBfBxStPbInGtB`BlBzA~b@l]bAx@d@\\jBxAjMdKTPxGlFnJvH|StPnCxBhFbEr@{EfEeYvCyRf@kD\\{BBUtC}RfAoFbAcFpDsNl@_Cl@aCfLcd@r@sCn@cC`Lsc@p@kCl@aCjE}P`E}Od@iBz@{DrD`A|JxCxWdFxc@fLzIzBzL~C~Bj@dAXlg@rM~Ab@pA^|`@pLp@RtBl@bBf@xEpAjQ`FtBl@xF~AjEjAtIbCxGMzWjIhCv@jBl@ju@pUnCz@pCdAvRnIfUpJlV~KtBbAlB~@l`@|SvBhAXNjCvApLnGxBlAnFtCnGeEbZyQ~G}E`B}AhBsBfByBnFkH|AiBzAeBzAcB|A{AdB}ApBwAhCyAfCkApVwKbh\\qjOjBKhBWdCu@zDgBvAi@xAi@dBc@`BQpAGrAFvAVtAp@lAz@lAvA~@hBj@|BXdCFtBIhCWtBe@`By@|AeArAm@`@e@Rs@PyANoB@yAL}AT_BXyBQ}IW_Um@aQUqAHcBTyBf@_Dt@{Ad@uAj@}CrAuR|IoCnA\\gUBiBmCBoDGaIOkL[yNWeB@gBBcC?ao@iBwBEyBGkYs@}HQoAEeBEua@aAyAEyGQ';

const lineFeature = map.addPolyline(route, { 
  id: 'route', 
  precision: 6 
});

lineFeature.on('click', ({ feature, originalEvent }) => {
 // do something when clicking on line
});



// adding a polygon to the map
const geojson = {"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-73.95820498349376,40.80026256420331],[-73.9816545434309,40.76824212209061],[-73.97283590550576,40.764244806438285],[-73.94918592197929,40.79677293396304],[-73.95820498349376,40.80026256420331]]]}}

const polygonFeature = map.addPolygon(geojson, { 
  id: 'polygon',
  paint: {
    'fill-color': '#FF6F00',
    'fill-opacity': 0.3,
  },
});

polygonFeature.on('click', ({ feature, originalEvent }) => {
   polygonFeature.remove(); // remove feature from map
});


// fit the map to all features
map.fitToFeatures({ padding: 20 });

// remove all features from map
map.clearFeatures();

Polyline

image

Polygon

image

MultiPolygon

image

@kochis kochis changed the title WIP: add line drawing support WIP: Add line and polygon drawing support Aug 5, 2024
@jaspk06 jaspk06 self-requested a review August 13, 2024 19:25
@kochis kochis changed the title WIP: Add line and polygon drawing support Add line and polygon drawing support Aug 14, 2024
@kochis kochis marked this pull request as ready for review August 14, 2024 20:06
jaspk06
jaspk06 previously approved these changes Aug 14, 2024
addPolyline function

use feature class

handle fitting map to features

add event handling to RadarMapFeature

add support for polygon drawing

fix label

bump beta version

prevent marker propagation to map

add popup support

bump beta version

support nested merging of line and polygon options

dont modify target object im mergeDeep

bump beta version

manually handle close marker popups

bump version

use map data event instead of interval when waiting for map to be ready
@kochis kochis force-pushed the add-line-drawing-support branch from aba7820 to 78d32e6 Compare August 14, 2024 20:30
@kochis kochis merged commit 1679809 into master Aug 14, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants