{"id":22423,"date":"2016-10-04T11:22:11","date_gmt":"2016-10-04T09:22:11","guid":{"rendered":"http:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/"},"modified":"2016-10-04T11:22:12","modified_gmt":"2016-10-04T09:22:12","slug":"mappe-interattive-mobile-friendly-con-leafletjs","status":"publish","type":"post","link":"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/","title":{"rendered":"Mappe interattive mobile friendly con LeafletJS"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div readability=\"44.092019543974\">\n<article readability=\"30.861607142857\">\n<p>Diverse le funzionalit\u00e0 supportate per l&#8217;interazione tra utenti e mappe, da questo punto di vista si va dalla possibilit\u00e0 di zoomare tramite scroll e di mettere in atto zoom attraverso il doppio click via mouse su terminale Desktop, fino al <em>pinch-zoom<\/em> sui display dei dispositivo mobili. E&#8217; possibile implementare lo zoom di aree specifiche (<em>shift-drag<\/em>), gestire gli eventi (click, mouseover..) e rendere trascinabili i marker per le posizioni.<\/p>\n<p>Sono supportate la navigazione tramite tastiera, la risoluzione degli schermi basati sulla tecnologia <strong>Retina<\/strong> e le animazioni per i panel, lo zoom e i pop-up. Pop-up e controlli possono essere personalizzati tramite regole di stile <strong>CSS3<\/strong>, consentendo il maggior adattamento possibile alle caratteristiche del progetto corrente; nello stesso modo si possono estendere facilmente le classi utilizzate per il perfezionamento delle funzionalit\u00e0 di base.<\/p>\n<p>Relativamente alle prestazioni, Leaflet supporta l&#8217;accelerazione hardware su dispositivo mobili per garantire una <em>user experience<\/em> simile a quella delle applicazioni native. Un sistema di building modulare permette di mettere in funzione soltanto le funzionalit\u00e0 necessarie per la Web application che si sta sviluppando, mentre la possibilit\u00e0 di utilizzare CSS3 rende pi\u00f9 leggeri e meno bisognosi di risorse i progetti realizzati.<\/p>\n<p>Diversi i plugin gi\u00e0 implementati per il completamento della libreria, con estensioni dedicate agli aspetti pi\u00f9 diversi della gestione delle mappe, dalla geolocalizzazione al geoprocessing, dalla carattere all&#8217;esportazione fino all&#8217;overlay data e display.<\/p>\n<p>Via <a href=\"http:\/\/leafletjs.com\/\" title=\"Leaflet\" target=\"_blank\">Leaflet<\/a>  <\/p>\n<p>&#13;<br \/>\n          <!--div class=\"sharelink\">\n              \n\n<ul>\n                  \n\n<li class=\"facebook\"><a href=\"#\" onclick=\"window.open( 'https:\/\/www.facebook.com\/sharer\/sharer.php?u='+encodeURIComponent('http:\/\/blog.html.it\/03\/10\/2016\/mappe-interattive-mobile-friendly-con-leafletjs\/'),'condividi l'articolo su facebook', 'width=626,height=436,location=no,directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;\">Facebook<\/a><\/li>\n\n\n                  \n\n<li class=\"twitter\"><a href=\"#\" onclick=\"window.open( 'https:\/\/twitter.com\/share?url=http%3A%2F%2Fblog.html.it%2F03%2F10%2F2016%2Fmappe-interattive-mobile-friendly-con-leafletjs%2F&via=html_it&text=Mappe%20interattive%20mobile%20friendly%20con%20LeafletJS','condividi l'articolo su twitter', 'width=626,height=436,location=no,directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;\">Twitter<\/a><\/li>\n\n\n              <\/ul>\n\n\n          <\/div-->&#13;<br \/>\n          &#13;<br \/>\n\t\t<\/article>\n<div readability=\"5.3095238095238\">\n            <!--\n\n<style>\n\n.newletter-item, .newsletter-box \n  \/*float: left;\n  margin: 5px 0 20px 0;*\/\n  display: block;\n  width: 100%;\n\n\n.newletter-item, .newsletter-box p \n    font-size: 18px;\n    letter-spacing: 0.3px;\n    line-height: 28px;\n    padding: 0 0 34px 0;\n    color: #161616;\n    font-family: 'Alegreya', serif;\n\n\n.newletter-item, .newsletter-box p span \n  font-weight: bold;\n\n\n.newsletter-box img\n    width: 48px;\n    height: auto;\n    margin: 0 auto 34px auto;\n\n\n.newsletter-panel \n  display: block;\n  width: auto;\n  height: 129px;\n  background: url(http:\/\/www.html.it\/wp-content\/themes\/www.html.it\/images\/newsletter\/newsletter-bg.png) no-repeat;\n  position: relative;\n  left: 0px;\n\n.newsletter-panel form \n  margin: 0;\n\n.newsletter-panel .line-item \n  display: block;\n  float: left;\n  margin: 0 0 0 20px;\n  display: block;\n  width: 408px;\n\n.newsletter-panel input \n  float: left;\n  display: block;\n\n.newsletter-panel input[type=\"text\"] \n  margin: 20px 0 10px 20px;\n  width: 395px;\n  height: 26px;\n  line-height: 26px;\n  padding: 2px;\n\n.newsletter-panel input[type=\"radio\"] \n  margin: 6px 3px 0 0;\n\n.newsletter-panel label.radio-item \n  float: left;\n  display: block;\n  font-size: 1em;\n  width: 10px;\n  margin: 6px 10px 0 0;\n\n.newsletter-panel .lable-text \n  display: block;\n  float: left;\n  width: 240px;\n  font-size: 10px !important;\n  color: #333333 !important;\n  line-height: 130%;\n  margin: 6px 0 0 0px !important;\n\n.newsletter-panel .lable-text a \n  color: #333\n\n.newsletter-panel input[type=\"button\"] \n  position: relative;\n  top: -50px;\n  left: 64px;\n  width: 127px;\n  height: 47px;\n  background: url(http:\/\/www.html.it\/wp-content\/themes\/www.html.it\/images\/newsletter\/newsletter-butt.png) no-repeat;\n  background-repeat: no-repeat;\n  border: 0;\n  cursor: pointer;\n\n.newsletter-panel input[type=\"button\"]:hover \n  background-image: url(http:\/\/www.html.it\/wp-content\/themes\/www.html.it\/images\/newsletter\/newsletter-butt-roll.png);\n\n.newsletter-panel label.radio-item \n  font-size: 10px !important;\n\n.error-newsletter\npadding: 10px 20px;\n\n<\/style>\n\n--><\/p>\n<div id=\"newsletter_div\" class=\"newletter-item nav-txt newsletter-box\" readability=\"6.5347985347985\">\n<p>Se vuoi aggiornamenti su <b>Mappe interattive mobile friendly con LeafletJS<\/b> inserisci la tua e-mail nel box qui sotto:<\/p>\n<\/div><\/div><\/div>\n<p><br \/>\n<br \/><a href=\"http:\/\/feedproxy.google.com\/~r\/htmlitedit\/~3\/QYc0ycD7u4A\/\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diverse le funzionalit\u00e0 supportate per l&#8217;interazione tra utenti e mappe, da questo punto di vista si va dalla possibilit\u00e0 di zoomare tramite scroll e di mettere in atto zoom attraverso il doppio click via mouse su terminale Desktop, fino al pinch-zoom sui display dei dispositivo mobili. E&#8217; possibile implementare lo zoom di aree specifiche (shift-drag),&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":""},"categories":[37],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mappe interattive mobile friendly con LeafletJS - Web Agency Italia Web Designer realizzazione siti web Italy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mappe interattive mobile friendly con LeafletJS - Web Agency Italia Web Designer realizzazione siti web Italy\" \/>\n<meta property=\"og:description\" content=\"Diverse le funzionalit\u00e0 supportate per l&#8217;interazione tra utenti e mappe, da questo punto di vista si va dalla possibilit\u00e0 di zoomare tramite scroll e di mettere in atto zoom attraverso il doppio click via mouse su terminale Desktop, fino al pinch-zoom sui display dei dispositivo mobili. E&#8217; possibile implementare lo zoom di aree specifiche (shift-drag),...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Agency Italia Web Designer realizzazione siti web Italy\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-04T09:22:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-10-04T09:22:12+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/\",\"url\":\"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/\",\"name\":\"Mappe interattive mobile friendly con LeafletJS - Web Agency Italia Web Designer realizzazione siti web Italy\",\"isPartOf\":{\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/#website\"},\"datePublished\":\"2016-10-04T09:22:11+00:00\",\"dateModified\":\"2016-10-04T09:22:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.multimediaweb.eu\/web-agency\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mappe interattive mobile friendly con LeafletJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/#website\",\"url\":\"https:\/\/www.multimediaweb.eu\/web-agency\/\",\"name\":\"Web Agency Italia Web Designer realizzazione siti web Italy\",\"description\":\"Web design creazione siti web Italia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.multimediaweb.eu\/web-agency\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/www.multimediaweb.eu\/web-agency\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mappe interattive mobile friendly con LeafletJS - Web Agency Italia Web Designer realizzazione siti web Italy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/","og_locale":"it_IT","og_type":"article","og_title":"Mappe interattive mobile friendly con LeafletJS - Web Agency Italia Web Designer realizzazione siti web Italy","og_description":"Diverse le funzionalit\u00e0 supportate per l&#8217;interazione tra utenti e mappe, da questo punto di vista si va dalla possibilit\u00e0 di zoomare tramite scroll e di mettere in atto zoom attraverso il doppio click via mouse su terminale Desktop, fino al pinch-zoom sui display dei dispositivo mobili. E&#8217; possibile implementare lo zoom di aree specifiche (shift-drag),...","og_url":"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/","og_site_name":"Web Agency Italia Web Designer realizzazione siti web Italy","article_published_time":"2016-10-04T09:22:11+00:00","article_modified_time":"2016-10-04T09:22:12+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"admin","Tempo di lettura stimato":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/","url":"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/","name":"Mappe interattive mobile friendly con LeafletJS - Web Agency Italia Web Designer realizzazione siti web Italy","isPartOf":{"@id":"https:\/\/www.multimediaweb.eu\/web-agency\/#website"},"datePublished":"2016-10-04T09:22:11+00:00","dateModified":"2016-10-04T09:22:12+00:00","author":{"@id":"https:\/\/www.multimediaweb.eu\/web-agency\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42"},"breadcrumb":{"@id":"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.multimediaweb.eu\/web-agency\/mappe-interattive-mobile-friendly-con-leafletjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.multimediaweb.eu\/web-agency\/"},{"@type":"ListItem","position":2,"name":"Mappe interattive mobile friendly con LeafletJS"}]},{"@type":"WebSite","@id":"https:\/\/www.multimediaweb.eu\/web-agency\/#website","url":"https:\/\/www.multimediaweb.eu\/web-agency\/","name":"Web Agency Italia Web Designer realizzazione siti web Italy","description":"Web design creazione siti web Italia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.multimediaweb.eu\/web-agency\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.multimediaweb.eu\/web-agency\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42","name":"admin","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.multimediaweb.eu\/web-agency\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.multimediaweb.eu\/web-agency\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/posts\/22423"}],"collection":[{"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/comments?post=22423"}],"version-history":[{"count":1,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/posts\/22423\/revisions"}],"predecessor-version":[{"id":22424,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/posts\/22423\/revisions\/22424"}],"wp:attachment":[{"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/media?parent=22423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/categories?post=22423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/tags?post=22423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}