google maps draw shape lib

Bibliothèque de formes de dessin Google Maps

google-maps-draw-shape-lib est une bibliothèque JavaScript écrite sur un petit ensemble de l'API Google Maps, qui vous permet de dessiner une forme de polygone sur une carte Google et d'obtenir ses coordonnées.

Installer

npm i google-maps-draw-shape-lib

Usage

 import MapDrawShapeManager from 'google-maps-draw-shape-lib' ;

// Google Maps JavaScript API instance
const map = new google . maps . Map ( element , mapOptions ) ;
// Callback function that will be called when user create or delete shape 
const onDrawCallback = ( shape ) => console . log ( shape ) ;
// Flag indicating whether it should set Drawing Mode enabled
const drawingMode = false ;
// Flag indicating whether it should set Draw Free Hand Mode enabled
const drawFreeHandMode = false ;
// Object containing the google polygon options to be used when drawing
const polygonOptions = {
  clickable : false ,
  fillColor : "#303030" ,
  fillOpacity : 0.1 ,
  strokeColor : "#000000" ,
  strokeWeight : 4 ,
  strokeOpacity : 1
} ;
// String with the inner HTML of the draw initial point overlay 
const initialPointInnerHtml = `<button class="your-custom-initial-point-class" title="Initial Point"></button>` ;
// String with the inner HTML of the draw delete point overlay 
const deletePointInnerHtml = `<button class="your-custom-delete-point-class" title="Delete">X</button></div>` ;

// Create Google Maps Draw Shape Library instance
const manager = new MapDrawShapeManager (
  map ,
  onDrawCallback , 
  drawingMode ,
  drawFreeHandMode ,
  polygonOptions ,
  initialPointInnerHtml ,
  deletePointInnerHtml
) ;

// Example of shape returned on callback function
const initalShape = [
  { lat : 38.71755745031312 , lng : - 9.34395756832437 } ,
  { lat : 39.780999209652855 , lng : - 8.82210698238687 } ,
  { lat : 38.91016617157451 , lng : - 6.82259526363687 } ,
  { lat : 38.71755745031312 , lng : - 9.34395756832437 }
] ;

// Draws the input shape on the map
manager . initDrawnShape ( initalShape ) ;

// Clears the drawn shape
manager . resetDrawnShape ( ) ;

// Sets the draw mode to drag instead of click if drawFreeHandMode flag is true
manager . setDrawFreeHandMode ( drawFreeHandMode ) ;

// Sets the map on draw mode if drawingMode flag is true
manager . setDrawingMode ( drawingMode ) ; 

Exemples

Exemple de cette bibliothèque utilisée dans React: Google-Maps-Draw-Shape-React (Source)

Licence

Mit