Skip to content

C
cms
Commit f5da2559 authored by PDuarte's avatar PDuarte
Browse files
Options

location map 1

parent 3f3bdf7e
Show whitespace changes
Inline Side-by-side
Showing with 436 additions and 1907 deletions
src/@core/scss/map/leaflet.draw.css 0 → 100644
View file @ f5da2559
.leaflet-draw-section{position:relative}.leaflet-draw-toolbar{margin-top:12px}.leaflet-draw-toolbar-top{margin-top:0}.leaflet-draw-toolbar-notop a:first-child{border-top-right-radius:0}.leaflet-draw-toolbar-nobottom a:last-child{border-bottom-right-radius:0}.leaflet-draw-toolbar a{background-image:url('/static/media/spritesheet.png');background-image:linear-gradient(transparent,transparent),url('/static/media/spritesheet.svg');background-repeat:no-repeat;background-size:300px 30px;background-clip:padding-box}.leaflet-retina .leaflet-draw-toolbar a{background-image:url('/static/media/spritesheet-2x.png');background-image:linear-gradient(transparent,transparent),url('/static/media/spritesheet.svg')}
.leaflet-draw a{display:block;text-align:center;text-decoration:none}.leaflet-draw a .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.leaflet-draw-actions{display:none;list-style:none;margin:0;padding:0;position:absolute;left:26px;top:0;white-space:nowrap}.leaflet-touch .leaflet-draw-actions{left:32px}.leaflet-right .leaflet-draw-actions{right:26px;left:auto}.leaflet-touch .leaflet-right .leaflet-draw-actions{right:32px;left:auto}.leaflet-draw-actions li{display:inline-block}
.leaflet-draw-actions li:first-child a{border-left:0}.leaflet-draw-actions li:last-child a{-webkit-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.leaflet-right .leaflet-draw-actions li:last-child a{-webkit-border-radius:0;border-radius:0}.leaflet-right .leaflet-draw-actions li:first-child a{-webkit-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.leaflet-draw-actions a{background-color:#919187;border-left:1px solid #AAA;color:#FFF;font:11px/19px "Helvetica Neue",Arial,Helvetica,sans-serif;line-height:28px;text-decoration:none;padding-left:10px;padding-right:10px;height:28px}
.leaflet-touch .leaflet-draw-actions a{font-size:12px;line-height:30px;height:30px}.leaflet-draw-actions-bottom{margin-top:0}.leaflet-draw-actions-top{margin-top:1px}.leaflet-draw-actions-top a,.leaflet-draw-actions-bottom a{height:27px;line-height:27px}.leaflet-draw-actions a:hover{background-color:#a0a098}.leaflet-draw-actions-top.leaflet-draw-actions-bottom a{height:26px;line-height:26px}.leaflet-draw-toolbar .leaflet-draw-draw-polyline{background-position:-2px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline{background-position:0 -1px}
.leaflet-draw-toolbar .leaflet-draw-draw-polygon{background-position:-31px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon{background-position:-29px -1px}.leaflet-draw-toolbar .leaflet-draw-draw-rectangle{background-position:-62px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle{background-position:-60px -1px}.leaflet-draw-toolbar .leaflet-draw-draw-circle{background-position:-92px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle{background-position:-90px -1px}
.leaflet-draw-toolbar .leaflet-draw-draw-marker{background-position:-122px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker{background-position:-120px -1px}.leaflet-draw-toolbar .leaflet-draw-draw-circlemarker{background-position:-273px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker{background-position:-271px -1px}.leaflet-draw-toolbar .leaflet-draw-edit-edit{background-position:-152px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit{background-position:-150px -1px}
.leaflet-draw-toolbar .leaflet-draw-edit-remove{background-position:-182px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove{background-position:-180px -1px}.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled{background-position:-212px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled{background-position:-210px -1px}.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled{background-position:-242px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled{background-position:-240px -2px}
.leaflet-mouse-marker{background-color:#fff;cursor:crosshair}.leaflet-draw-tooltip{background:#363636;background:rgba(0,0,0,0.5);border:1px solid transparent;-webkit-border-radius:4px;border-radius:4px;color:#fff;font:12px/18px "Helvetica Neue",Arial,Helvetica,sans-serif;margin-left:20px;margin-top:-21px;padding:4px 8px;position:absolute;visibility:hidden;white-space:nowrap;z-index:6}.leaflet-draw-tooltip:before{border-right:6px solid black;border-right-color:rgba(0,0,0,0.5);border-top:6px solid transparent;border-bottom:6px solid transparent;content:"";position:absolute;top:7px;left:-7px}
.leaflet-error-draw-tooltip{background-color:#f2dede;border:1px solid #e6b6bd;color:#b94a48}.leaflet-error-draw-tooltip:before{border-right-color:#e6b6bd}.leaflet-draw-tooltip-single{margin-top:-12px}.leaflet-draw-tooltip-subtext{color:#f8d5e4}.leaflet-draw-guide-dash{font-size:1%;opacity:.6;position:absolute;width:5px;height:5px}.leaflet-edit-marker-selected{background-color:rgba(254,87,161,0.1);border:4px dashed rgba(254,87,161,0.6);-webkit-border-radius:4px;border-radius:4px;box-sizing:content-box}
.leaflet-edit-move{cursor:move}.leaflet-edit-resize{cursor:pointer}.leaflet-oldie .leaflet-draw-toolbar{border:1px solid #999}
\ No newline at end of file
src/assets/images/maps/spritesheet.svg 0 → 100644
View file @ f5da2559
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 600 60"
height="60"
width="600"
id="svg4225"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="spritesheet.svg"
inkscape:export-filename="/home/fpuga/development/upstream/icarto.Leaflet.draw/src/images/spritesheet-2x.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<metadata
id="metadata4258">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4256" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview4254"
showgrid="false"
inkscape:zoom="1.3101852"
inkscape:cx="237.56928"
inkscape:cy="7.2419621"
inkscape:window-x="1920"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg4225" />
<g
id="enabled"
style="fill:#464646;fill-opacity:1">
<g
id="polyline"
style="fill:#464646;fill-opacity:1">
<path
d="m 18,36 0,6 6,0 0,-6 -6,0 z m 4,4 -2,0 0,-2 2,0 0,2 z"
id="path4229"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
<path
d="m 36,18 0,6 6,0 0,-6 -6,0 z m 4,4 -2,0 0,-2 2,0 0,2 z"
id="path4231"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
<path
d="m 23.142,39.145 -2.285,-2.29 16,-15.998 2.285,2.285 z"
id="path4233"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
</g>
<path
id="polygon"
d="M 100,24.565 97.904,39.395 83.07,42 76,28.773 86.463,18 Z"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
<path
id="rectangle"
d="m 140,20 20,0 0,20 -20,0 z"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
<path
id="circle"
d="m 221,30 c 0,6.078 -4.926,11 -11,11 -6.074,0 -11,-4.922 -11,-11 0,-6.074 4.926,-11 11,-11 6.074,0 11,4.926 11,11 z"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
<path
id="marker"
d="m 270,19 c -4.971,0 -9,4.029 -9,9 0,4.971 5.001,12 9,14 4.001,-2 9,-9.029 9,-14 0,-4.971 -4.029,-9 -9,-9 z m 0,12.5 c -2.484,0 -4.5,-2.014 -4.5,-4.5 0,-2.484 2.016,-4.5 4.5,-4.5 2.485,0 4.5,2.016 4.5,4.5 0,2.486 -2.015,4.5 -4.5,4.5 z"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
<g
id="edit"
style="fill:#464646;fill-opacity:1">
<path
d="m 337,30.156 0,0.407 0,5.604 c 0,1.658 -1.344,3 -3,3 l -10,0 c -1.655,0 -3,-1.342 -3,-3 l 0,-10 c 0,-1.657 1.345,-3 3,-3 l 6.345,0 3.19,-3.17 -9.535,0 c -3.313,0 -6,2.687 -6,6 l 0,10 c 0,3.313 2.687,6 6,6 l 10,0 c 3.314,0 6,-2.687 6,-6 l 0,-8.809 -3,2.968"
id="path4240"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
<path
d="m 338.72,24.637 -8.892,8.892 -2.828,0 0,-2.829 8.89,-8.89 z"
id="path4242"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
<path
d="m 338.697,17.826 4,0 0,4 -4,0 z"
transform="matrix(-0.70698336,-0.70723018,0.70723018,-0.70698336,567.55917,274.78273)"
id="path4244"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
</g>
<g
id="remove"
style="fill:#464646;fill-opacity:1">
<path
d="m 381,42 18,0 0,-18 -18,0 0,18 z m 14,-16 2,0 0,14 -2,0 0,-14 z m -4,0 2,0 0,14 -2,0 0,-14 z m -4,0 2,0 0,14 -2,0 0,-14 z m -4,0 2,0 0,14 -2,0 0,-14 z"
id="path4247"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
<path
d="m 395,20 0,-4 -10,0 0,4 -6,0 0,2 22,0 0,-2 -6,0 z m -2,0 -6,0 0,-2 6,0 0,2 z"
id="path4249"
inkscape:connector-curvature="0"
style="fill:#464646;fill-opacity:1" />
</g>
</g>
<g
id="disabled"
transform="translate(120,0)"
style="fill:#bbbbbb">
<use
xlink:href="#edit"
id="edit-disabled"
x="0"
y="0"
width="100%"
height="100%" />
<use
xlink:href="#remove"
id="remove-disabled"
x="0"
y="0"
width="100%"
height="100%" />
</g>
<path
style="fill:none;stroke:#464646;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="circle-3"
d="m 581.65725,30 c 0,6.078 -4.926,11 -11,11 -6.074,0 -11,-4.922 -11,-11 0,-6.074 4.926,-11 11,-11 6.074,0 11,4.926 11,11 z"
inkscape:connector-curvature="0" />
</svg>
src/views/settings/locations/card/MapTooltip.js
View file @ f5da2559
...@@ -3,17 +3,33 @@ import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' ...@@ -3,17 +3,33 @@ import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap'
import { import {
Circle, Circle,
CircleMarker, CircleMarker,
MapContainer, // MapContainer,
Marker, Marker,
Polygon, Polygon,
Popup, Popup,
Rectangle, Rectangle,
TileLayer, TileLayer,
FeatureGroup,
MapContainer as LeafletMap,
Tooltip Tooltip
} from 'react-leaflet' } from 'react-leaflet'
import { EditControl } from "react-leaflet-draw" import { EditControl } from "react-leaflet-draw"
import L from 'leaflet'
// import '@styles/map/leaflet.draw.css'
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
iconRetinaUrl:
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/images/marker-icon.png',
iconUrl:
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/images/marker-icon.png',
shadowUrl:
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/images/marker-shadow.png'
})
//
let polyline
const center = [51.505, -0.09] const center = [51.505, -0.09]
...@@ -44,38 +60,249 @@ const MapTooltip = () => { ...@@ -44,38 +60,249 @@ const MapTooltip = () => {
const clickedText = clicked === 0 ? 'Click this Circle to change the Tooltip text' : `Circle click: ${clicked}` const clickedText = clicked === 0 ? 'Click this Circle to change the Tooltip text' : `Circle click: ${clicked}`
const _editableFG = null
const _onChange = () => {
return
// this._editableFG contains the edited geometry, which can be manipulated through the leaflet API
// const { onChange } = props
if (!_editableFG
//|| !onChange
) {
return
}
const geojsonData = _editableFG.toGeoJSON()
console.log(geojsonData)
// onChange(geojsonData)
}
const _onEdited = (e) => {
let numEdited = 0
e.layers.eachLayer((layer) => {
numEdited += 1
})
console.log(`_onEdited: edited ${numEdited} layers`, e)
_onChange()
}
const _onCreated = (e) => {
const type = e.layerType
const layer = e.layer
if (type === 'marker') {
// Do marker specific actions
console.log('_onCreated: marker created', e)
} else {
console.log('_onCreated: something else created:', type, e)
}
// Do whatever else you need to. (save to db etc)
_onChange()
}
const _onDeleted = (e) => {
let numDeleted = 0
e.layers.eachLayer((layer) => {
numDeleted += 1
})
console.log(`onDeleted: removed ${numDeleted} layers`, e)
_onChange()
}
const _onMounted = (drawControl) => {
console.log('_onMounted', drawControl)
}
const _onEditStart = (e) => {
console.log('_onEditStart', e)
}
const _onEditStop = (e) => {
console.log('_onEditStop', e)
}
const _onDeleteStart = (e) => {
console.log('_onDeleteStart', e)
}
const _onDeleteStop = (e) => {
console.log('_onDeleteStop', e)
}
return ( return (
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle tag='h4'>Map</CardTitle> <CardTitle tag='h4'>Map</CardTitle>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<MapContainer center={center} zoom={13} className='leaflet-map'>
<LeafletMap center={center} zoom={13} className='leaflet-map'>
<FeatureGroup
ref={(reactFGref) => {
// this._onFeatureGroupReady(reactFGref)
}}
>
<EditControl
position="topright"
onEdited={_onEdited}
onCreated={_onCreated}
onDeleted={_onDeleted}
onMounted={_onMounted}
onEditStart={_onEditStart}
onEditStop={_onEditStop}
onDeleteStart={_onDeleteStart}
onDeleteStop={_onDeleteStop}
draw={{
rectangle: false
}}
/>
</FeatureGroup>
<TileLayer <TileLayer
attribution='&ampcopy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' attribution='&ampcopy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
/> />
<Circle center={center} fillColor='blue' onClick={onClickCircle} radius={200}>
<Tooltip>{clickedText}</Tooltip>
</Circle>
<CircleMarker center={[51.51, -0.12]} color='red' radius={20}>
<Tooltip>Tooltip for CircleMarker</Tooltip>
</CircleMarker>
<Marker position={[51.51, -0.09]}>
<Popup>Popup for Marker</Popup>
<Tooltip>Tooltip for Marker</Tooltip>
</Marker>
<Polygon color='purple' positions={multiPolygon}> <Polygon color='purple' positions={multiPolygon}>
<Tooltip sticky>sticky Tooltip for Polygon</Tooltip> <Tooltip sticky>sticky Tooltip for Polygon</Tooltip>
</Polygon> </Polygon>
<Rectangle bounds={rectangle} color='black'>
<Tooltip direction='bottom' offset={[0, 20]} opacity={1} permanent> </LeafletMap>
permanent Tooltip for Rectangle
</Tooltip>
</Rectangle>
</MapContainer>
</CardBody> </CardBody>
</Card> </Card>
) )
}
// data taken from the example in https://github.com/PaulLeCam/react-leaflet/issues/176
function getGeoJson() {
return {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[-122.47979164123535, 37.830124319877235],
[-122.47721672058105, 37.809377088502615]
]
}
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [-122.46923446655273, 37.80293476836673]
}
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [-122.48399734497069, 37.83466623607849]
}
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [-122.47867584228514, 37.81893781173967]
}
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[-122.48069286346434, 37.800637436707525],
[-122.48069286346434, 37.803104310307276],
[-122.47950196266174, 37.803104310307276],
[-122.47950196266174, 37.800637436707525],
[-122.48069286346434, 37.800637436707525]
]
]
}
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[-122.48103886842728, 37.833075326166274],
[-122.48065531253813, 37.832558431940114],
[-122.4799284338951, 37.8322660885204],
[-122.47963070869446, 37.83231693093747],
[-122.47948586940764, 37.832467339549524],
[-122.47945636510849, 37.83273426112019],
[-122.47959315776825, 37.83289737938241],
[-122.48004108667372, 37.833109220743104],
[-122.48058557510376, 37.83328293020496],
[-122.48080283403395, 37.83332529830436],
[-122.48091548681259, 37.83322785163939],
[-122.48103886842728, 37.833075326166274]
]
]
}
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[-122.48043537139893, 37.82564992009924],
[-122.48129367828368, 37.82629397920697],
[-122.48240947723389, 37.82544653184479],
[-122.48373985290527, 37.82632787689904],
[-122.48425483703613, 37.82680244295304],
[-122.48605728149415, 37.82639567223645],
[-122.4898338317871, 37.82663295542695],
[-122.4930953979492, 37.82415839321614],
[-122.49700069427489, 37.821887146654376],
[-122.4991464614868, 37.82171764783966],
[-122.49850273132326, 37.81798857543524],
[-122.50923156738281, 37.82090404811055],
[-122.51232147216798, 37.823344820392535],
[-122.50150680541992, 37.8271414168374],
[-122.48743057250977, 37.83093781796035],
[-122.48313903808594, 37.82822612280363],
[-122.48043537139893, 37.82564992009924]
]
]
}
}
]
}
_onFeatureGroupReady = (reactFGref) => {
// populate the leaflet FeatureGroup with the geoJson layers
const leafletGeoJSON = new L.GeoJSON(getGeoJson())
const leafletFG = reactFGref
leafletGeoJSON.eachLayer((layer) => {
leafletFG.addLayer(layer)
})
// store the ref for future access to content
_editableFG = reactFGref
}
} }
export default MapTooltip export default MapTooltip
yarn.lock
View file @ f5da2559
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment