<!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. mac终端命令简介

    mac终端命令简介(适合刚刚入手mac的新人们) 1.取得root权限 意义相当与windows中的超级管理员权限,甚至还要超出.root权限可以修改系统中的任何文件,不过对普通用户的意义不大,了解即 ...

  2. USB CDC类

    现代嵌入式系统中,异步串行通信接口往往作为标准外设出现在单片机和嵌入式系统中.但是随着个人计算机通用外围设备越来越少地使用串口,串口正在逐渐从个人计算机特别是便携式电脑上消失.于是嵌入式开发人员常常发 ...

  3. Android EditText的常用技巧

    1.       设定 EditText 的滚动条.对齐方式.行数.和提示 (hint) 及其颜色 在布局文件,比如 main.xml 中,增加 < EditText android:id =  ...

  4. HDU 4288 Coder 【线段树+离线处理+离散化】

    题意略. 离线处理,离散化.然后就是简单的线段树了.需要根据mod 5的值来维护.具体看代码了. /* 线段树+离散化+离线处理 */ #include <cstdio> #include ...

  5. 【HDOJ】2037 今年暑假不AC

    qsort排序后DP,水题.注意,数组开大点儿,把时间理解为0~23,开太小会wa. #include <stdio.h> #include <stdlib.h> #defin ...

  6. EF多数据库预热

    使用EF第一次加载程序会很慢,因为EF第一次会生成实体类和数据库的对应关系并做缓存,怎么解决这个问题呢?站在巨人的肩膀上将会省力很多,博客园的dudu已经给出了个解决方案(EF版本6.0以上) htt ...

  7. WordPress FunCaptcha插件跨站脚本漏洞

    漏洞名称: WordPress FunCaptcha插件跨站脚本漏洞 CNNVD编号: CNNVD-201311-431 发布时间: 2013-11-29 更新时间: 2013-11-29 危害等级: ...

  8. 转 Xcode磁盘空间大清理

    http://www.iwangke.me/2013/09/09/clean-xcode-to-free-up-disk-space/#jtss-tsina 我的设备是Macbook Air 13’ ...

  9. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  10. 嵌入式 uboot、fs、kernel制作和烧录简记-hi3518c

    NULL RAM : mkdir ramdisk_test  临时挂在点 dd if=/dev/zero of=rootfs.ramdisk bs=1k count=10000 建立空硬盘//1500 ...