It's a simple dependency that uses Leaflet JS to create a map and insert into your HTML. I created this package to have a simplest way to insert a map into different projects without having to copy and paste the same code. Any suggerences or pull request are welcome to improve this simple dependency.
- Simple Open Street Map without POI (Points Of Interest) only the markers you add
- Marker Cluster: If you have some markers so close, when it zooms out it will group them to avoid markers overlapping
- Custom Popup: Add your own custom html or text into markers popup (then you should style it if you want it prettier)
Is not a npm public package yet, maybe in the future I'll publish it there, meanwhile to install this map dependency you should do it like this:
npm install git+ssh://[email protected]/edseto/map.git| Parameter | Type | Description |
|---|---|---|
selector |
string |
Id of HTML container that will hold the map |
options |
Object |
Object with map options and markers to initialize the map (see options object) |
| Parameter | Type | Description |
|---|---|---|
mapOptions |
Object |
Options used to initializate the map (see mapOptions object) |
markers |
Array (Object) |
Optional Markers that will be added in the map (see markers object) |
| Parameter | Type | Description |
|---|---|---|
lat |
Number |
Latitude where the map will be placed |
lng |
Number |
Longitude where the map will be placed |
zoom |
Number |
Optional Default: 15 Map zoom |
zIndex |
Number |
Optional Default: 0 Map container z-index |
scrollWheelZoom |
Boolean |
Optional Default: false Enable/disable zoom with mouse scroll |
showCoverageOnHover |
Boolean |
Optional Default: false Enable/disable show markercluster coverage on hover |
| Parameter | Type | Description |
|---|---|---|
title |
String |
Optional Marker title and alt that describes the place and shown on marker popup |
icon |
String |
Url where the marker icon can been founded |
address |
String |
Optional Place address shown on marker popup |
customPopup |
String |
Optional Custom popup content |
centerOnClick |
Boolean |
Optional Default: true Center map to marker when clicked |
position |
Object: {lat, lng} |
Position (latitude, longitude) where the marker will be placed |
size |
Object: {width, height} |
Optional Default: {33, 44} Marker size (width, height) in px |
anchor |
Object: {x, y} |
Optional Default: {16, 44} Marker anchor position, the icon will be centered by these values |
First of all you need to add Leaflet styles.
- Option A: Adding it in the HTML with a CDN
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/MarkerCluster.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css"
/>- Option B: Adding it in the CSS
@import 'leaflet/dist/leaflet.css';
@import 'leaflet.markercluster/dist/MarkerCluster.css';
@import 'leaflet.markercluster/dist/MarkerCluster.Default.css';Make sure your map container has a defined height, for example:
#map {
height: 450px;
}Now you can add your javascript like this:
import Map from 'map'
const options = {
'mapOptions': {
'lat': 42.119460611154786,
'lng': 2.76507646206246,
'zoom': 13
},
'markers': [
{
'title': 'Restaurante la Tattinada',
'icon': 'http://localhost:8080/img/map-icon.png',
'address': 'Plaça de Perpinyà, 24',
'position': {
'lat': 42.116855610146345,
'lng': 2.7658891677192545
}
}
]
}
new Map('map', options)What if I want to add markers later? Then you can do it using addMarker method, like below:
import Map from 'map'
const options = {
'mapOptions': {
'lat': 42.119460611154786,
'lng': 2.76507646206246,
'zoom': 13
},
}
const map = new Map('map', options)
const marker = {
'title': 'Restaurante la Tattinada',
'icon': 'http://localhost:8080/img/map-icon.png',
'address': 'Plaça de Perpinyà, 24',
'position': {
'lat': 42.116855610146345,
'lng': 2.7658891677192545
}
}
map.addMarker(marker)I would like to add my own popup content, can I? Of course you can, here is the way (this is just an example, you can add whatever you want as you style it propertly) with customPopup marker option (Remember: you will need to add your own styles in your css file):
import Map from 'map'
const options = {
'mapOptions': {
'lat': 42.119460611154786,
'lng': 2.76507646206246,
'zoom': 13
},
'markers': [
{
'title': 'Restaurante la Tattinada',
'icon': 'http://localhost:8080/img/map-icon.png',
'address': 'Plaça de Perpinyà, 24',
'position': {
'lat': 42.116855610146345,
'lng': 2.7658891677192545
},
'customPopup': `
<section class="home-map">
<div class="home-map__item">
<div class="home-map__image">
<div class="c-img">
<img class="c-img-fit" src="http://localhost:8080/img/map-icon.png" alt="Lorem ipsum">
</div>
</div>
<div class="home-map__info">
<div class="item-text">
<div class="subtitle">Banyoles</div>
<div class="title">Restaurante la Tattinada</div>
</div>
<div class="item-price">
<div class="item-price__start">Desde</div>
<div class="item-price__center">8.56</div>
<div class="item-price__end">Pizza (tamaño individual)</div>
</div>
<a href="http://localhost:8080/some-link" class="c-button">Descubrir</a>
</div>
</div>
</section>`,
}
]
}
new Map('map', options)This project is available under the MIT license.