Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import React from 'react'
import { PureComponent } from 'react'
import { Map, TileLayer } from 'react-leaflet'
import L from 'leaflet'
// Example imports
import { Marker, Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import icon from 'leaflet/dist/images/marker-icon.png'
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'
let DefaultIcon = L.icon({
iconUrl: icon,
iconRetinaUrl: iconRetinaUrl,
shadowUrl: iconShadow,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
tooltipAnchor: [16, -28],
shadowSize: [41, 41]
})
L.Marker.prototype.options.icon = DefaultIcon
const position = [-33.0079, -58.5109]
const zoomLevel = 11
// const position = [51.505, -0.09]
attribution='Β© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{props.drawCircle &&
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
const planeIcon = L.icon({
iconUrl: planeImg,
iconSize: [64, 64],
popupAnchor: [-3, -76],
shadowUrl: '',
});
const radarIcon = L.icon({
iconUrl: radarImg,
iconSize: [64, 64],
popupAnchor: [-3, -76],
shadowUrl: ''
});
const maxRadars = 6;
export class RadarMap {
constructor(zoomLevel) {
this.L = L;
this.map = this.L.map('map');
var mainLayer = this.L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png', {
attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
var drawBillboard = function(image, dataurl) {
iconOptions.iconUrl = dataurl || image;
if (!defined(iconOptions.iconSize)) {
iconOptions.iconSize = [image.width * scale, image.height * scale];
}
var w = iconOptions.iconSize[0],
h = iconOptions.iconSize[1];
var xOff = (w / 2) * (1 - horizontalOrigin) - pixelOffset.x;
var yOff = (h / 2) * (1 + verticalOrigin) - pixelOffset.y;
iconOptions.iconAnchor = [xOff, yOff];
if (!color.equals(defaultColor)) {
iconOptions.iconUrl = recolorBillboard(image, color);
}
marker.setIcon(L.icon(iconOptions));
};
var img = new Image();
LeafletMarkerAdapter.prototype.setIconURL = function (iconURL) {
var newIcon = L.icon({
iconUrl: iconURL
});
this._nativeMarker.setIcon(newIcon);
};
import React, { Component } from 'react';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { Card, CardText, Button } from 'reactstrap';
import userLocationURL from './user_location.svg';
import messageLocationURL from './message_location.svg';
import MessageCardForm from './MessageCardForm';
import { getMessages, getLocation, sendMessage } from './API';
import './App.css';
const myIcon = L.icon({
iconUrl: userLocationURL,
iconSize: [50, 82]
});
const messageIcon = L.icon({
iconUrl: messageLocationURL,
iconSize: [50, 82]
});
class App extends Component {
state = {
location: {
lat: 51.505,
lng: -0.09,
},
haveUsersLocation: false,
createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
var pinColor = color.substr(1);
var icon = L.icon({
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
iconSize: [21, 34],
iconAnchor: [10, 34],
popupAnchor: [0, -34],
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
shadowSize: [40, 37],
shadowAnchor: [12, 35]
});
var iconInfo = {
size: [21, 34],
icon: icon
};
onMarkerIconReady(iconInfo);
}
zoom: options.zoom,
minZoom: window.innerWidth < 768 ? 5 : 6
})
this.initializeGeocoderControl()
this.initializeBasemapLayers()
this.map.zoomControl.setPosition('bottomright')
this.initializeLayerStore(this.props, this.map)
const defaultMarker = L.icon({
iconUrl: defaultMarkerIcon,
iconAnchor: [24, 44],
popupAnchor: [0, -44]
})
const watchLocationMarker = L.icon({
iconUrl: gpsFixedIcon,
iconAnchor: [18, 20]
})
this.geolocationControl(defaultMarker)
this.geolocateCircle = null
this.geolocateIcon = null
this.popupContentNode = null
this.map
.on('locationfound', (e) => {
if (this.geolocateCircle) {
this.map.removeLayer(this.geolocateCircle)
}
if (this.geolocateIcon) {
const getIcon = (options, iconURL) => {
const multiplier = window.innerWidth >= 576 ? 1 : 0.6;
if (iconURL && options) {
const { width, height } = options;
return L.icon({
iconUrl: iconURL,
iconSize: [multiplier * width, multiplier * height]
});
} else {
return L.icon({
iconUrl: challenge,
iconSize: [multiplier * 35, multiplier * 35]
});
}
};
function createVesselIcons(shouldUseRoundIcon) {
if (shouldUseRoundIcon) {
const icon = Leaf.icon({
iconUrl: 'vessel-marker-round.png',
iconSize: [30, 30],
iconAnchor: [15, 15]
})
return {large: icon, medium: icon, small: icon}
}
const large = Leaf.icon({
iconUrl: 'vessel-large.png',
iconSize: [20, 50],
iconAnchor: [10, 25]
})
const medium = Leaf.icon({
iconUrl: 'vessel-medium.png',
iconSize: [16, 40],
iconAnchor: [8, 20]
})
const small = Leaf.icon({
iconUrl: 'vessel-small.png',
iconSize: [12, 30],
iconAnchor: [6, 15]
})