<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>Leaflet Demo</title>

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>

</head>

<body>

<div id="map"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

</body>

</html>
$.getJSON('//jsbin.com/qogati/1.js', renderMap);

function renderMap (geoData) {

  var map = L.map('map');

  var osm = '//{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png';

  L.tileLayer(osm).addTo(map);

  var geoJson = L.geoJson(geoData, {

    style: function (feature) {

      return {

        weight: 1,

        opacity: 0.5,

        color: '#00ff00',

        fillColor: '#00dd00',

        fillOpacity: 0.2

      }

    }

  }).addTo(map);

  map.fitBounds(geoJson.getBounds());

}

[Javascript] Adding Shapes to Maps with Leaflet and GeoJSON的更多相关文章

  1. [Javascript] Webpack Loaders, Source Maps, and ES6

    Using ES6 To use ES6, we need loader. Modify webpack.config.js file: module.exports = { entry: './in ...

  2. 使用leaflet绘制geoJson中国边界

    绘制中国边界 代码如下: function drawChina() { //设置样式 var myStyle = { "color": "#00f", &quo ...

  3. JavaScript Source Maps浅析

    阅读目录 有用的链接 Link: 原文链接 译文开始: 对网站进行性能优化对一个最容易的方法就是把JS和CSS进行打包压缩.但是当你需要调试这些压缩文件中的代码的时候,会发生什么?可能会是一场噩梦.但 ...

  4. leaflet地图库

    an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...

  5. JavaScript资源大全中文版（Awesome最新版）

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  6. Leaflet客户端学习笔记

    Leaflet介绍 Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库.代码仅有 33 KB,但它具有开发在线地图的大部分功能.支持插件扩展, L ...

  7. 如何实现通过Leaflet加载dwg格式的CAD图

    前言 ​ 在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加,openlayers功能很全面,但同时也很庞大,入门比较难,适合于大中型项目中.而在中小型项目中,一般用开源的 ...

  8. Google Maps API Web Services

    原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Goo ...

  9. The tilde ( ~ ) operator in JavaScript

    From the JavaScript Reference on MDC, ~ (Bitwise NOT) Performs the NOT operator on each bit. NOT a y ...

随机推荐

  1. C# Eval在asp.net中的用法及作用

    Eval( " ")和Bind( " ") 这两种一个单向绑定,一个双向绑定,bind是双向绑定,但需数据源支持 ASP.NET 2.0改善了模板中的数据绑定操 ...

  2. RTMP

    实时消息传输协议 RTMP(Real Time Messaging Protocol) http://blog.csdn.net/defonds/article/details/17403225 译序 ...

  3. laravel code bright

    Project RootLet’s start by taking a look at the root folder structure.• app/• bootstrap/• vendor/• p ...

  4. cgi ISAP sapi等

    1.CGI和FastCGI是apache处理php脚本的其中两种工作模式,还有ISAPI,SAPI等 2.而php-fpm并不是一种工作模式,而是一个PHP在FastCGI模式运行下的进程管理器,全称 ...

  5. 详解强大的SQL注入工具——SQLMAP

    1. 前言  Windows下的注入工具好的又贵,免费的啊D.明小子等又不好用,我们根本没必要花 时间去找什么破解的havij.pangolin什么的,特别是破解的工具很可能被绑了木马.其实 Linu ...

  6. [Andrew]Ext.net Grid常用js

    var gridFunction= function (gridId) {                //获取当前Grid                var gridView = Ext.ge ...

  7. 解决 EF 分层查询的一个性能问题[转]

    前两年帮朋友 做了个网吧管理软件,采用动软的三层架构 sql语句生成的.最近因功能变更 要改动,而我这段正在做asp.net mvc +ef+autofac的一个电商网站.索性 就把原来的底层全重新了 ...

  8. QT-opencv小结

    gcc –v 4.5 cmake编译opencv 2.4.4   ox00000005错误(gcc版本不对) gcc –v4.5  <----------qt 推荐打包,而不是static

  9. Phonegap3.4 环境搭建及新建项目

    一.环境准备 1.到这里安装Node.js. 2.到这里下载Adroid ADT Bundle for Windows,下载后解压,我的放在:F:\MobileDev\adt-bundle-windo ...

  10. Class.forName（）数据库驱动

    在学习jdbc中,用到Class.forName(驱动);,当时学习的时候知道Class.forName就是加载一个类到虚拟机,在加载一个类的时候,这个类的信息会被放到一个方法区,一个CLass 在J ...