{"id":8228,"date":"2019-04-29T07:30:50","date_gmt":"2019-04-29T10:30:50","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8228"},"modified":"2019-04-25T15:19:15","modified_gmt":"2019-04-25T18:19:15","slug":"criando-uma-timeline-com-o-leaflet","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/29\/criando-uma-timeline-com-o-leaflet\/","title":{"rendered":"Criando uma timeline com o Leaflet"},"content":{"rendered":"<p>Se voc\u00ea est\u00e1 procurando uma op\u00e7\u00e3o para gerar uma timeline (linha do tempo) no seu mapa, voc\u00ea pode utilizar o Time-Slider do <a href=\"http:\/\/www.fernandoquadro.com.br\/html\/leaflet\/\" rel=\"noopener\" target=\"_blank\">Leaflet<\/a> que permite que voc\u00ea adicione e remova dinamicamente marcadores em um mapa usando um <a href=\"http:\/\/jqueryui.com\/slider\/\" rel=\"noopener\" target=\"_blank\">controle deslizante do JQuery<\/a>.<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/map_slider.png\" alt=\"\" width=\"1043\" height=\"598\" class=\"aligncenter size-full wp-image-8234\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/map_slider.png 1043w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/map_slider-300x172.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/map_slider-768x440.png 768w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/map_slider-1024x587.png 1024w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/map_slider-945x542.png 945w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/map_slider-600x344.png 600w\" sizes=\"auto, (max-width: 1043px) 100vw, 1043px\" \/><br \/>\n<\/center><\/p>\n<p>Para implementar esse recurso no seu mapa, primeiramente voc\u00ea precisa adicionar as seguintes bibliotecas:<\/p>\n<ul>\n<li> <a href=\"https:\/\/github.com\/dwilhelm89\/LeafletSlider\/blob\/master\/SliderControl.js\">SliderControl.js<\/a>\n<li> <a href=\"http:\/\/code.jquery.com\/jquery-1.9.1.min.js\" rel=\"noopener\" target=\"_blank\">JQuery<\/a> <\/li>\n<li> <a href=\"http:\/\/code.jquery.com\/ui\/1.9.2\/themes\/base\/jquery-ui.css\" rel=\"noopener\" target=\"_blank\">JQueryUI &#8211; CSS<\/a> <\/li>\n<li> <a href=\"http:\/\/code.jquery.com\/ui\/1.9.2\/jquery-ui.js\" rel=\"noopener\" target=\"_blank\">JQueryUI &#8211; JS<\/a> <\/li>\n<\/ul>\n<p>Para ativar o recurso de Slider, voc\u00ea precisa de uma camada para o SliderControl, adicionar o Slider ao mapa e inici\u00e1-lo usando o m\u00e9todo startSlider().<\/p>\n<pre>\r\n\/\/ Criar uma camada de marcador (no exemplo, feito por meio de um GeoJSON FeatureCollection) \r\nvar testlayer = L.geoJson(json);\r\nvar sliderControl = L.control.sliderControl({position: \"topright\", layer: testlayer});\r\n\r\n\/\/ Certifique-se de adicionar o controle deslizante ao mapa ;-)\r\nmap.addControl(sliderControl);\r\n\r\n\/\/ E inicialize o sliderControl do slider\r\nsliderControl.startSlider();\r\n<\/pre>\n<p>Ajuste a propriedade de tempo usada para que ela se ajuste ao seu projeto:<\/p>\n<pre>\r\n$('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 19));\r\n<\/pre>\n<p>Voc\u00ea tamb\u00e9m pode usar um controle deslizante de intervalo usando a propriedade range:<\/p>\n<pre>\r\nsliderControl = L.control.sliderControl({position: \"topright\", layer: testlayer, range: true});\r\n<\/pre>\n<p>Se voc\u00ea preferir exibir apenas os marcadores no registro de data e hora especificado pelo controle deslizante, use a propriedade follow:<\/p>\n<pre>\r\nsliderControl = L.control.sliderControl({position: \"topright\", layer: testlayer, follow: 3});\r\n<\/pre>\n<p>Este exemplo exibir\u00e1 o marcador atual e os dois marcadores anteriores na tela. Especifique um valor de 1 (ou true) para exibir apenas um \u00fanico ponto de dados por vez e um valor de nulo (ou false) para exibir o marcador atual e todos os marcadores anteriores. A propriedade range substitui a propriedade follow.<\/p>\n<p>Voc\u00ea pode usar a propriedade rezoom para garantir que os marcadores exibidos permane\u00e7am vis\u00edveis. Nada acontece com um valor null (ou false), mas um valor inteiro ser\u00e1 o n\u00edvel de zoom m\u00e1ximo que o Leaflet usa para atualizar os limites do mapa para os marcadores exibidos.<\/p>\n<pre>\r\nsliderControl = L.control.sliderControl({position: \"topright\", layer: testlayer, rezoom: 10});\r\n<\/pre>\n<p>O Slider do Leaflet tamb\u00e9m pode ser usado para LayerGroups usuais com recursos mistos (marcadores e linhas, etc.)<\/p>\n<pre>\r\nvar marker1 = L.marker([51.5, -0.09], {time: \"2013-01-22 08:42:26+01\"});\r\nvar marker2 = L.marker([51.6, -0.09], {time: \"2013-01-22 10:00:26+01\"});\r\nvar marker3 = L.marker([51.7, -0.09], {time: \"2013-01-22 10:03:29+01\"});\r\n\r\nvar pointA = new L.LatLng(51.8, -0.09);\r\nvar pointB = new L.LatLng(51.9, -0.2);\r\nvar pointList = [pointA, pointB];\r\n\r\nvar polyline = new L.Polyline(pointList, {\r\n    time: \"2013-01-22 10:24:59+01\",\r\n\tcolor: 'red',\r\n\tweight: 3,\r\n\topacity: 1,\r\n\tsmoothFactor: 1\r\n});\r\n\r\n\r\nlayerGroup = L.layerGroup([marker1, marker2, marker3, polyline ]);\r\nvar sliderControl = L.control.sliderControl({layer:layerGroup});\r\nmap.addControl(sliderControl);\r\nsliderControl.startSlider();\r\n<\/pre>\n<p>Para suporte por toque (em telas touch screen), adicione:<\/p>\n<pre>\r\n&lt;script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui-touch-punch\/0.2.2\/jquery.ui.touch-punch.min.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>O Slider de Leaflet tamb\u00e9m \u00e9 um pacote registrado no Bower (baseado em nodejs). Integre a fonte em seu projeto com os seguintes comandos:<\/p>\n<pre>\r\nnpm install -g bower\r\nbower install leaflet-slider\r\n<\/pre>\n<p>Fonte: <a href=\"https:\/\/github.com\/dwilhelm89\/LeafletSlider\" rel=\"noopener\" target=\"_blank\">GitHub<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea est\u00e1 procurando uma op\u00e7\u00e3o para gerar uma timeline (linha do tempo) no seu mapa, voc\u00ea pode utilizar o Time-Slider do Leaflet que permite que voc\u00ea adicione e remova dinamicamente marcadores em um mapa usando um controle deslizante do&#8230; <a class=\"more-link\" href=\"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/29\/criando-uma-timeline-com-o-leaflet\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":275,"featured_media":8230,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[140,249,293],"class_list":["post-8228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","tag-javascript","tag-jquery","tag-leaflet"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/users\/275"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/comments?post=8228"}],"version-history":[{"count":5,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8228\/revisions"}],"predecessor-version":[{"id":8235,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8228\/revisions\/8235"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/8230"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=8228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=8228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=8228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}