Giter Club home page Giter Club logo

react-leaflet-examples's Introduction

๐Ÿ react-leaflet-examples

react-leaflet-examples a collection of examples of leaflet map usage

License: MIT

The full version (vanilla-js) with all working examples can be found at this link leaflet-examples.

Demo

Here is a working live demo : https://tomickigrzegorz.github.io/react-leaflet-examples/

Work in progress ๐Ÿ˜ƒ Suggestions welcome ๐Ÿ’ก.

The crossed-out titles will be supplemented over time ๐Ÿ˜ƒ

48 tabs-in-popup
47 random-marker-in-map-bounds
46 location-button
45 tiles-gray
44 checking-if-the-marker-is-in-viewport
43 image-on-map
42 show-scale
41 back-to-home-button
40 distance-between-two-points
39 coordinates-of-the-center-of-the-visible-map
38 part-of-the-common
37 enlarge-a-polygon-box-by-5%
36 story map with IntersectionObserver
35 marker-draggable-on-a-click
34 multiple-tile-layers
33 location
32 image icons prev next
31 awesome markers plugin
30 miniMap plugin
29 linked-view
28 adding-map-description
27 fullscreen
26 markers-60K
25 fitBounds-with-padding
24 polyline
23 custom-marker-and-popup
22 center-map-when-click-marker
21 geocoding-addresses-search-engine-outside-the-map
20 maxBound-map-restricts-the-view
19 custom-button
18 add-move-and-delete-marker
17 tileLayer
16 geoJson-extended-action
15 geoJson-simple
14 dragable-markers
13 svg-markers-width-legends
12 controlling-polygons
11 controlling-the-map-from-outside-the-map
10 matching-all-markers-to-the-map-view
09 marker-grouping-markercluster-plugin
08 controlling-different-groups-of-markers
07 image-instead-of-map
06 coordinates-of-the-visible-map
05 coordinates-after-clicking-on-the-map
04 many-markers
03 adding-one-marker
02 changing-locate-zoom-control
01 simple-map

react-leaflet-examples's People

Contributors

erasta avatar tomickigrzegorz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-leaflet-examples's Issues

Hi bro, Do you know remove a shape draw like paint in react leaflet?

I write this code for the function to draw the shape like paint:

let paintMode = false;
var myPolyline;

map.on('click', function() {
  paintMode = !paintMode;
  if (paintMode) {
    myPolyline = L.polyline([]).addTo(map);
  }
})

map.on('mousemove', function(e) {
  if (paintMode) {
    myPolyline.addLatLng(e.latlng);
  }
})

And now I wanna write a function this can help me remove this shape. This is a video demo of the function draw shapes like paint: . Thank a lot.

npm start unsuccessful

I encountered the following error after running npm i && nom start. Running yarn install and yarn start gave me the same result as well.

node:internal/modules/cjs/loader:488
      throw e;
      ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/alisonqiu/Downloads/react-leaflet-examples/node_modules/postcss-safe-parser/node_modules/postcss/package.json
    at new NodeError (node:internal/errors:372:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:439:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:718:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/alisonqiu/Downloads/react-leaflet-examples/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v17.7.1

Missing file - "image instead of map" section

The image instead of map section is not getting display in the page.

and if the source code link is correct, it is because the file is missing on the project. (the source code url is getting a 404 error)

image

404 error

the links are broken an 404 error

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.