\");\n $(this._container).find('.map-container').append(\"
\");\n //$(this._container).append(\"
\"+overlayContent.call(this)+\"
\");\n \n if(this._loading.show){\n this.showOverlay('full')\n }\n\n let map = L.map(this._map_id,{preferCanvas:true, attributionControl: false}).setView([this._lat || -22.37, this._lng || -48.55], this._zoom || 10);\n\n if(this._fullscreen){\n let control = L.control.fullscreen(this._fullscreen).addTo(map)\n }\n\n this._map = map\n \n //carregando basemaps caso informado na inicialização\n if(this._basemap){\n this.addBaseMap()\n } else {\n //caso não tenha controle de camadas base, carregar a camada padrão do openstreet no mapa\n L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '©
OpenStreetMap contributors'\n }).addTo(map);\n }\n \n if(this._temp_marker){\n let context = this\n this.addLayerToMap(new L.featureGroup(), 'temp_marker') //camada para adicionar marker temporário em qualquer lugar no mapa\n this.generateTempMarkerListener()\n \n $(document).on('click', '.location-marker-nearby-markers', e=>{\n let dataset = e.target.dataset\n $(document).trigger('find-location-box:nearby-button::click', {id: dataset.id, lat: dataset.lat, lng: dataset.lng})\n })\n\n $(document).on('click', '.leaflet-tooltip .btn-copy-coord', e=>{\n let latLng = context.getLayer('temp_marker').pm._layers[0]._latlng\n e.target.innerHTML = 'copiado'\n navigator.clipboard.writeText(`${latLng.lat},${latLng.lng}`);\n }).on('mouseout', '.leaflet-tooltip .btn-copy-coord', e =>{\n e.target.innerHTML = 'copiar'\n }) \n \n }\n\n if(this._sidebar && this._sidebar.items){\n let sideBarComponent = new Sidebar({container:'.map-container', position: 'left', \n menu_items:this._sidebar.items,\n map: map,\n open: this._sidebar.open\n })\n\n sideBarComponent.on('show-content', menuItem=>{\n $(document).trigger('MAP:SIDE-BAR::SHOW_MENU_ITEM', menuItem)\n })\n }\n\n eventsHandler.call(this)\n }\n /**\n * Função para criar um listener de clicks no mapa que analisa se a posição do mouse não se modifica entre o clicar/soltar. (basicamente analisando se NÃO É um evento de drag)\n * o LeafletMap possui sim um listener de evento de 'drag', mas por complicações gerais o nosso listener de click esta sendo colocado no DOMELEMENT _container do mapa. Esse obviamente não tem evento de drag\n * O comportamento esperado é o seguinte: Em caso de click, adicionar/mover o marcador temporario pro local. Em caso de drag, não fazer nada. Em caso de zoom change, não fazer nada\n */\n\n this.generateTempMarkerListener = () =>{\n let compareMousePosition = () =>{ //função que comparar a posição do click.\n return (mouse_up_event.screenX == mouse_down_event.screenX && mouse_up_event.screenY == mouse_down_event.screenY)\n }\n \n let mouse_up_event,mouse_down_event //variaveis que com o evento de click no mapa\n\n $(this.getMap()._container).on('mousedown', (e)=>{\n mouse_down_event = e.originalEvent\n })\n\n $(this.getMap()._container).on('mouseup', (e)=>{\n if(e.target.id == \"map\" || e.target.nodeName == 'path'){\n mouse_up_event = e.originalEvent\n if(compareMousePosition()){ //compararndo posição do mouse\n // temp_marker_options.show = true\n temp_marker_options.markable = true\n } else {\n // temp_marker_options.show = false\n temp_marker_options.markable = false\n }\n }\n })\n }\n\n this.tempMakerHandler = (click_event) =>{\n if(temp_marker_options.markable){\n this.clearLayer('temp_marker')\n if(!temp_marker_options.show){\n let marker = this.generateTempMarker(click_event.latlng)\n this.addLayerToFeature('temp_marker',marker)\n temp_marker_options.show = true\n } else {\n temp_marker_options.show = false\n } \n }\n temp_marker_options.markable = false\n }\n\n\n /**\n * Cria o controle de basemaps no mapa. Cada layer do objeto deve ser composta com os parâmetros 'url, icon, name, attribution, default'.\n * É essencial que uma das layers tenha o parâmetro 'default:true'. Sem uma layer default a biblioteca 'L.basemapsSwitcher' não funciona corretamente.\n */\n this.addBaseMap = () =>{\n new L.basemapComponent(this._basemap.layers\n ,{position: 'bottomleft'}).addTo(this._map)\n }\n /**\n * Adiciona layer ao mapa com identificação\n * @param {LeafletLayer} layer \n * @param {String} id identificador da camada\n */\n this.addLayerToMap = (layer, id) =>{\n layer.id = id\n if(!this._layers[id]){\n this._map.addLayer(layer)\n this._layers[id] = layer\n }\n }\n /**\n * responds if overlay is current showing\n */\n this.isOverlayShowing =()=>{\n return $(this._container +\" .map-overlay\").is(':visible')\n }\n /**\n * Caso exista, sera escondida a overlay do mapa\n * @param {String} map_id \n */\n this.hideOverlay = (data_id) =>{\n if($(this._container +\" .map-overlay\").attr(\"id\") == data_id){\n $(this._container +\" .map-overlay\").hide()\n $(this._container +\" .map-overlay\").attr(\"id\", data_id)\n }\n }\n /**\n * Caso exista e esteja escondida, sera mostrada a overlay do mapa\n * @param {String} map_id \n */\n this.showOverlay = (data_id) =>{\n if(!this.isOverlayShowing()){\n $(this._container +\" .map-overlay\").attr(\"id\", data_id)\n $(this._container +\" .map-overlay\").show()\n }\n }\n\n this.setOverlayPosition = (position) =>{\n //atualizando options no objeto '_loading'\n this._loading = {...this._loading, position:position}\n //atualizando a overlay atual de acordo com as novas options\n overlayUpdate.call(this)\n }\n /**\n * Adiciona uma layer dentro de uma feature adicionada ao mapa. Por exemplo, adicionar um marker dentro de um FeatureGroup já carregado no mapa.\n * @param {String} layer_id id da feature que receberá a layer. Lembre-se que esse ID foi definido ao adicionar a feature no mapa via MapComponent.addLayerToMap.\n * @param {LeafletLayer} layer LeafletLayer que será adicionada a feature\n */\n this.addLayerToFeature = (feature_id, layer, layer_id) =>{\n let l = this.getLayer(feature_id)\n layer.id = layer_id\n l.addLayer(layer)\n }\n\n /**\n * Caso exista, layer sera removida do mapa\n * @param {String} layer_id \n */\n this.removeLayer = layer_id =>{\n if(this._layers[layer_id]){\n this._map.removeLayer(this._layers[layer_id])\n delete this._layers[layer_id]\n }\n }\n /**\n * remove uma layer que esta dentro de um feature/layer\n * @param {String} feature_id id da layer pai\n * @param {String} layer_id id layer que sera removida do mapa\n */\n this.removeLayerFromFeature = (feature_id, layer_id) =>{\n let f = this.getLayer(feature_id)\n if(f){\n let l = Object.values(f._layers).filter(x=>x.id == layer_id)\n if(l.length > 0){\n l.forEach(x=>this.getMap().removeLayer(x)) \n }\n }\n }\n\n /**\n * Remove todas as camadas presentes na layer/feature\n * @param {String} layer_id \n */\n this.clearLayer = layer_id =>{\n let l = this.getLayer(layer_id)\n if(l){\n l.clearLayers()\n }\n }\n /**\n * Gera um DOM ELEMENT leaflet e insere no mapa na posição informada\n * Gerado com a classe 'dom-element-defataul', que caso queira, possui um estilo definido no arquivo /styles/components/mapa/dom.css. Basta carregar esse arquivo no javascript\n * @param {String} id classe identificadora do elemento\n * @param {String} position posição do elemento no mapa. ex: topright\n * @param {String} html conteudo do elemento\n * @param {Func} func função ao clickar\n */\n this.createDomElement =(id, position, html, funcs, class_list = 'dom-element-default')=>{\n var elem = L.control({position: position});\n\t\telem.onAdd = function (map) {\n var div = L.DomUtil.create('div', class_list + \" \" +id);\n div.innerHTML += html\n L.DomEvent.disableClickPropagation(div);\n if(funcs){\n $.each(funcs, function(event, f){\n L.DomEvent.on(div, event, f)\n })\n \n }\n return div;\n };\n elem.addTo(this._map);\n }\n /**\n * Método para dar zoom na camada/feature presente no mapa.\n * Caminho da lista de camadas que está sendo analizado: 'this._map._layers' (lista de camadas padrão do leaflet para um mapa)\n * @param {String} layer_id id da camada\n * @returns {Boolean} true caso o zoom seja completo, false caso algum erro aconteça no processo\n */\n this.zoomToLayer = (layer_id) => {\n //obtendo instancia da layer na lista de layers do mapa\n let layer = this.getLayer(layer_id)\n //verificando se a feature existe e se tem alguma layer para método getBounds\n if(layer && this.hasLayers(layer)){\n try{\n //zoom para os limites da camada\n this._map.fitBounds(layer.getBounds())\n\n return true\n } catch(e){\n //erro desconhecido ao tentar dar o zoom, printando no console\n console.log('Erro ao tentar aproximar da camada', e)\n\n return false\n }\n } else {\n //layer sem camadas (ex: filtro de markers retornando nenhuma marker), retornando false por conta do 'erro ao dar zoom'\n return false\n } \n }\n /**\n * Panoramizar até a lat/lng informada\n * @param {LatLng} latLng leaflet LagLng object, ou array lat,lng. ex:[50,30]\n * @param {boolean} animated caso true, será usada uma função diferente, que possui uma animação além da localização\n */\n this.zoomToCoord = (latLng, animated,zoom) => {\n this._map.flyTo(latLng,zoom, {animate:animated})\n }\n\n this.zoomToFeature = feature =>{\n if(feature.getBounds().isValid()){\n this._map.fitBounds(feature.getBounds())\n }\n }\n\n this.setLayerStyle = (layer_id, style) =>{\n let layers = Object.values(this._map._layers).filter(x=>x.id == layer_id)\n layers.map(x=>x.setStyle(style))\n }\n /**\n * Retorna a layer/feature presente no mapa com o ID \n * @param {String} layer_id \n * @returns {LeafletLayer} ou undefined\n */\n this.getLayer = (layer_id) =>{\n let layer = Object.values(this._map._layers).filter(x=>x.id == layer_id)\n if(layer != []) {\n return layer[0]\n } else {\n throw \"Camada não localizada - \" + layer_id\n } \n }\n this.hasLayers = (feature)=>{\n return feature.getLayers().length > 0\n }\n\n this.getMap = () =>{\n return this._map\n }\n /**\n * Mapas Leaflet possuem apenas 4 posições para 'leaflet-control' inclusas [bottomleft, bottomright, topleft, topright]\n * Esse método adiciona uma nova posição para o mapa, com auxilio de css, acaba fixando em qualquer lugar do mapa\n * O comportamento esperado, é que uma nova 'div' dentro de '.leaflet-control-container' seja criada\n * @param {String} vside 'verticalSide': nome da 'primeira parte' da nova posição. ex: 'top'\n * @param {String} hside 'horizontalSide': nome da 'segunda parte' da nova posição. ex: 'middle'\n */\n this.addCustomPositionToMap = (vside, hside) => {\n var corners = this._map._controlCorners,\n l = 'leaflet-',\n container = this._map._controlContainer;\n \n function createCorner(vSide, hSide) {\n var className = l + vSide + ' ' + l + hSide;\n \n corners[vSide + hSide] = L.DomUtil.create('div', className, container);\n }\n createCorner(vside, hside);\n }\n /**\n * Recebe uma lista de markers e retorna um clusterGroup deles\n */\n this.markersToCluster =(markers, clusterOptions = {})=>{\n let cluster_markers = L.markerClusterGroup(clusterOptions);\n $.each(markers, function(index, marker){\n cluster_markers.addLayer(marker);\n })\n return cluster_markers\n }\n\n this.getNearbyMarkers = (latLng, radius) =>{\n let markers = []\n $.each(this.getLayer('markers').getLayers(), (index,marker)=>{\n //diferença entre o centro do circulo e o marcador\n let diff = this.getMap().distance(marker.getLatLng(), latLng);\n \n //verificando se o marker esta dentro do circulo\n let isInside = diff < radius;\n\n if(isInside){\n markers.push(marker)\n }\n })\n return markers\n }\n\n this.getWithinMarkers = layer =>{\n //lib 'PointInPolygon' adicionada via yarn\n let markers = []\n $.each(this.getLayer('markers').getLayers(), (index,marker)=>{\n let isInside = layer.contains(marker.getLatLng())\n if(isInside){\n markers.push(marker)\n }\n })\n return markers\n }\n\n this.generateTempMarker = latLng =>{\n let context = this\n var myIcon = L.divIcon({className: 'temp-marker-icon', html: '
'});\n let marker = L.marker(latLng, {icon:myIcon})\n let tooltip = L.tooltip({permanent:true, offset: new L.Point(15,5), interactive:true, type:'tooltip'}).setContent(generateTempMarkerTooltipContent(latLng, context._temp_marker.tooltip_content))\n if(this._temp_marker.show_tooltip){\n marker.bindTooltip(tooltip);\n }\n \n return marker\n }\n\n this.addPopup = (id, latLng, content) =>{\n popups[id] = L.popup().setLatLng(latLng).setContent(content)\n // popups[id] = L.popup()\n }\n this.setPopupLatLng = (id, latLng) => {\n popups[id].setLatLng(latLng)\n }\n this.getPopup = (id) =>{\n return popups[id]\n }\n this.openPopup = (id) =>{\n popups[id].openOn(this._map)\n }\n this.closePopup = (id) =>{\n popups[id]._close()\n }\n\n\n\n //Método para carregar e adicionar ao mapa a camada de limite estadual\n //Como é usado em DIVERSOS produtos do SIBH, vale a pena deixar aqui como helper\n //Adiciona ao mapa uma layer FeatureGroup com o id parametrizado, não precisa criar uma préviamente\n //O limite sera adicionado DENTRO da featureGroup\n /**\n * \n * @param {String} layer_id id do featureGroup 'pai' da camada\n * @param {Boolean} simplified se a camada sera a versão simplificada ou não\n * @returns \n */\n this.addStateLimitToMap = (layer_id, feature_style={}, request_options={}) =>{\n let context = this\n \n // //adicionando state_limit ao mapa\n this.addLayerToMap(new L.featureGroup(), layer_id)\n\n return new Promise((resolve, error)=>{\n this.getStateLimitFeature(request_options).then(featureGroup=>{\n context.addLayerToFeature(layer_id,featureGroup)\n resolve()\n })\n })\n }\n\n /**\n * Retorna uma promise que tem como resultado a featureGroup da layer do Limite estadual\n * @param {Object} request_options opções da request\n * @returns Promise\n */\n this.getStateLimitFeature = (request_options={}) =>{\n return new Promise((resolve, error)=>{\n _http_v1.request('maps/state_limit', 'GET', request_options).then(data=>{\n let featureGroup = L.featureGroup().addLayer(L.geoJson(JSON.parse(data[0].geometry_json), {\n onEachFeature: function (feature, l) {\n l.setStyle({color: '#4a4b65',weight:2, fill:false});\n }\n }))\n resolve(featureGroup)\n // context.addLayerToFeature(layer_id,featureGroup)\n })\n })\n }\n\n this.addCityLimitToMap = (layer_id, feature_style={}, request_options={}) =>{\n let context = this\n \n // //adicionando state_limit ao mapa\n this.addLayerToMap(new L.featureGroup(), layer_id)\n\n return _http_v1.request('maps/city_limit', 'GET', request_options).then(data=>{\n\n data.forEach(line=>{ \n //convertendo a camada em um geoJSON\n let layer = L.geoJSON(JSON.parse(line.geometry_json), feature_style) \n \n //adicionando camada de intensidade na camada de secas no mapa\n context.addLayerToFeature(layer_id,layer)\n })\n })\n\n }\n\n /**\n * Adiciona uma feature com os limites disponiveis na API de mapas no mapa atual. Exemplos: Estadual, Municipal, Ugrhi, etc.\n * @param {String} layer_id nome da layer que sera inserido o featureGroup do limite. Se a layer não existir no mapa, sera criada. Layer criada será um featureGroup\n * @param {String} limit_type Tipo do limite que será adicionado. Ex: ugrhi, city, state\n * @param {Object} feature_style Objeto com o estilo que sera usado no eachFeature\n * @param {Object} request_options Request Options caso tenha\n * @returns {Promise} promise que será resolvida quando o featureGroup já estiver sido adidicionado ao mapa\n */\n this.addLimitToMap = (layer_id, limit_type, feature_style={}, request_options={}) => {\n let context = this\n this.addLayerToMap(new L.featureGroup(), layer_id)\n return new Promise((resolve, fail)=>{\n this.getLimitFeature(limit_type, request_options,feature_style).then(featureGroup=>{\n context.addLayerToFeature(layer_id,featureGroup)\n resolve(featureGroup)\n })\n })\n }\n /**\n * Método que busca no database a geometria de um limite (estadual, municipal, etc..) e retorna um cria um featureGroup da mesma.\n * @param {String} limit_type Tipo do limite que será buscado. Ex: ugrhi, city, state\n * @param {Object} request_options Request Options caso tenha\n * @returns {Promise} promise que será resolvida quando o featureGroup for montada. Retorna a featureGroup como parametro\n */\n this.getLimitFeature = (limit_type, request_options,feature_style) =>{\n return this.getJSONlimit(limit_type, request_options).then(json_data=>{\n return this.JSONtoFeature(json_data, limit_type, feature_style)\n })\n }\n\n this.getJSONlimit = (limit_type, request_options) =>{\n let url = `maps/${limit_type}_limit`\n // return new Promise((resolve, error)=>{\n return _http_v1.request(url, 'GET', request_options)\n // })\n }\n\n this.JSONtoFeature = (JSON_data,limit_type, feature_style) =>{\n let featureGroup = new L.featureGroup()\n JSON_data.forEach(line=>{ \n //convertendo a camada em um geoJSON\n let layer = L.geoJSON(JSON.parse(line.geometry_json), feature_style) \n \n //nao deveria estar,mas outros produtos usam, nao tirar\n if(limit_type == 'ugrhi' || limit_type == 'subugrhi'){\n layer.codigo = line.codigo\n layer.nome = line.nome\n }\n if(limit_type == 'city'){\n layer.cod_ibge = line.cod_ibge\n layer.name = line.name\n }\n layer.obj_prop = line\n layer.defaultStyle = feature_style\n //adicionando camada de intensidade na camada de secas no mapa\n featureGroup.addLayer(layer)\n })\n featureGroup.getLayers().forEach(layer=>{\n layer.setStyle(feature_style)\n })\n return featureGroup\n }\n\n\n this.getStationsFeature = async (url_params, request_options={}, icon_options ={}) =>{\n let featureGroup = new L.featureGroup()\n return _http_v1.request(`station_prefixes/simplify?${url_params || ''}`, 'GET',request_options).then(stations=>{\n let icon = L.divIcon({className: `map-component-default-icon ${icon_options.klass || ''}`});\n stations.forEach(station=>{\n let marker = new L.marker([station.station.latitude, station.station.longitude], {icon:icon})\n marker.obj_prop = station\n featureGroup.addLayer(marker)\n })\n return featureGroup\n \n })\n }\n\n this.addTimelineRadarDaeeToMap = async () =>{\n const TimelineControl = await import('./timeline_control/TimelineControl');\n\n let states = await timeline_helper.getDaeeRadarStates(20)\n\n let timelineControl = new TimelineControl.default({\n map:this.getMap(), \n states:states,play:false,\n options:{contentType:'imageOverlay', imageBounds:{}, speed: 2}\n })\n \n timelineControl.generate()\n }\n\n this.addTimeLineTo\n\n this.getCurrentZoom = _ =>{\n return this.getMap().getZoom();\n }\n\n this.setMaxZoom = value =>{\n this.getMap().setMaxZoom(value)\n }\n\n this.setMinZoom = value =>{\n this.getMap().setMinZoom(value)\n }\n\n this.setZoom = value =>{\n this.getMap().setZoom(value)\n }\n\n function generateTempMarkerTooltipContent(latLng, content_options){\n // let html = \"
\"+latLng.lat.toFixed(5) + \", \" +latLng.lng.toFixed(5)+\"
\"\n let html = `
${latLng.lat.toFixed(5)}, ${latLng.lng.toFixed(5)} ${ (content_options.copy_button) ? '' : \"\" }
`\n\n if(content_options.copy){\n html += \"
Copiar
\"\n }\n\n if(content_options.closest_stations){\n html += \"
Selecionar próximos
\";\n\n [1,2,5,10].forEach(n=>{\n html += \"
\"\n })\n } \n\n if(content_options.distance){\n html += \"
\"\n }\n\n html += \"