Giter VIP home page Giter VIP logo

mapbox.js's Introduction

mapbox.js

Build Status

A Mapbox plugin for Leaflet, a lightweight JavaScript library for traditional raster maps.

For the state-of-the-art Mapbox vector maps library, see Mapbox GL JS.

API

Managed as Markdown in API.md, following the standards in DOCUMENTING.md

Examples

Usage

Recommended usage is via the Mapbox CDN, with code snippets available on the official documentation page

The mapbox.js file includes the Leaflet library. Alternatively, you can use mapbox.standalone.js, which does not include Leaflet (you will have to provide it yourself).

See the API documentation and Examples for further help.

Usage with Browserify

Install the mapbox.js module and add it to dependencies in package.json:

npm install mapbox.js --save

Require mapbox in your script:

// main.js

require('mapbox.js'); // <-- auto-attaches to window.L

Browserify it:

browserify main.js -o bundle.js

Usage as Download

You can download a built release at the mapbox.js-bower repository.

Building

Requires node.js installed on your system.

git clone https://github.com/mapbox/mapbox.js.git
cd mapbox.js
npm install
make

This project uses browserify to combine dependencies and installs a local copy when you run npm install. make will build the project in dist/.

Tests

Test with phantomjs:

npm test

To test in a browser, run a local development server and go to /test.

Version v0.x.x

Version v0.x.x can be accessed in the v0 branch..

Editing Icons

Requirements:

inkscape
pngquant
  1. Make edits to theme/images/icons.svg.
  2. Run ./theme/images/render.sh to update sprites from your edits.
  3. Add a CSS reference with the appropriate pixel coordinate if adding a new icon.

Running documentation locally

Documentation is powered by Jekyll. Running using the following command:

./jekyll.sh

mapbox.js's People

Contributors

aaronlidman avatar alianthes avatar alulsh avatar ansis avatar camilleanne avatar danswick avatar davidtheclark avatar geografa avatar heyitsgarrett avatar heystenson avatar ianshward avatar ingalls avatar jfirebaugh avatar jseppi avatar karenzshea avatar katydecorah avatar lshig avatar lxbarth avatar lyzidiamond avatar malwoodsantoro avatar mourner avatar samanpwbb avatar sbma44 avatar tatsvc avatar tmcw avatar tristen avatar who8mycakes avatar willwhite avatar yhahn avatar zachbeattie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mapbox.js's Issues

Versioning

I'm seeing a versioning layout like

<script src='http://api.mapbox.com/js/dev/mapbox.min.js'></script>
 <link  href='http://api.mapbox.com/js/dev/mapbox.min.css' type='text/css' rel='stylesheet' />

<script src='http://api.mapbox.com/js/0.0.0/mapbox.min.js'></script>
 <link  href='http://api.mapbox.com/js/0.0.0/mapbox.min.css' type='text/css' rel='stylesheet' />

This could either be reflected only in 'built' versions or in the repository itself. Thoughts?

layout options for controls.

cc @yhahn @tmcw

Tom and I talked about the possibility of introducing options in mapbox.js to control the layout position of map control elements. Options like:

  • vertical/horizontal alignment
  • area placement like top left, top right ..

Not sure if this is the best idea but it would make it easy for authors to control the design of controls without touching the css.

Tests

There should be centralized tests here for broad goals.

Unkink async operations

This library should make stuff like tilejson loading less painful. I'm not sure how to do this, but this is a problem for site-builders.

Minimize the Wax dependency

Right now Wax is 104KB compressed, which is by far the largest thing in this distribution. We should look at this in depth and see if there is room for improvement.

Show CHANGELOG

@tristen How do you think we should show the changelog online? Linking to GitHub might be a fine solution, though it'd be nice to have it front and center for early users.

Document ui

@aibram Can you doc the ui tweaks that you've made?

Manage dependencies

This repository should be able to tag to versions in semver and manage dependencies intelligently. It'll be one javascript file at the end, so should not need async loading initially.

Push to s3 architecture

Discussed this with @willwhite yesterday: our gameplan is

  • Push this library, versioned, to js.mapbox.com which is an s3 repo
  • Make sure to set very-long expires on all of the component files
  • Make a shell script or makefile to make this clearer

Create documentation

After the first push, we should be able to write some docs that refer to mapbox.js but keep all concepts pretty surface-level.

Document and unify CSS and element structure

@tristen this might be interesting to you:

I'd like to start documenting the element structure in mapbox.js - the wax-generated elements, modestmaps, anything that's styled by the mapbox.min.css style - so that we know where things come from, their structure in the DOM, and can provide alternative styles - themes - and maintain them properly.

one upstream: cutting-room-floor/wax#101

Not adding animate to MM functions

ModestMaps centering and zooming functions were extended with another argument, animate. Would it be a good idea to simplify these cases in Easey instead of extending the MM functions?

For example:
map.centerzoom(location, level, true)
becomes map.ease.center(location).zoom(level).run()
or perhaps just map.ease.centerzoom(location, zoom)?

If we override as little of MM as possible then mapbox.js stays as simple as possible.

If we avoid extending the MM functions like this we could say here's a regular MM map, with interaction, ui, and easey attached for convenience and with .auto() and .refresh() functions, instead of having to also document a whole bunch of functions.

Do we want to merge the projects together into one api, or just glue various individual components together?

@tmcw what do you think?

Make aggregate CSS & sprite

This is somewhat in the court of designers, but basically need to figure whether it'll be possible to just cat CSS or whether something more complex needs to happen here. Might want a final style push from @yhahn or another before this part goes live.

Using Jekyll on the examples pages?

@tmcw Does it make sense to use Jekyll for the site? It would allow us to keep a consistent page layout on example sections and one place to revise the mapbox.js version.

I mention this because it changes this slightly:

The structure of this repo is index.html, examplename/index.html.

Also we might want examples to bear different versions?

Propose name changes

These are upstream but I wanted to discuss them here:

map

layer.named -> layer.name
Named in the past tense just seems weird - even for what it does.

markers

markers.factory -> markers.render
factory to me is a pretty internal name. "Render" qualify's what it does: renders the object out as html
or re-renders them out

markers.features -> markers.data
Features is such a geojson spec name. "data" seems like a more appropriate name for how we are using features.

markers.addCallback -> markers.onEvent
This feels more clear to me on some event specified in the first argument, do something (callback)

markers.removeCallback -> markers.removeEvent

interaction.hide_on_move -> interaction.hideOnMove
underscores just dont sit right with me .. we should camelCase right?

interaction.formatter -> interaction.template
Debatable change.

ease

ease.t -> ease.toPoint
More clear

Examples gallery

Let's build out a big, beautiful examples gallery as part of this. This'll serve as a good test suite as well as a good place to show off proper coding patterns with mapbox.js.

Assuming that we'll need a skeleton to start out with ( @tristen lead as soon as you're done with a site revision ) and then we can all claim examples we want to build / port over.

Refine retina versions of controls

This should be _the_push to make things perfectly retina & mobile compatible.

  • DONE: zoom controls should adapt or look correct at 1:1 px
  • interaction controls may need the fix in cutting-room-floor/wax#198
  • should users be able to supply a retina version of their tiles?

Host on CDN

This is an eventual task. The URL will be something like

api.tiles.mapbox.com/v3/js/mapbox.js

Add easey integration

@aibram want to take this one? Your pick as far as how to proxy or differentiate easey calls from mm calls

Eat map-site

This code should make a lot of the things in map-site less necessary.

How should this handle styles?

Should there be a mapbox.css? Should this implementation of MM.Map detect for zero-width & zero-height maps and correct them?

Documentation site

The first shot at this is here: http://mapbox.com/mapbox.js/

@tristen do you have any thoughts on how to improve this? Basically the approach right now is (and this is prototyped, I haven't written the script to do it automatically)

  1. Pull in node_modules of modules as usual
  2. Get the API.md file out of each, copy to _posts and add YAML header
  3. Serve a jekyll site with a straight list of them all
  4. Build a TOC in JS

Ideally this will have the mapbox look, and may live in mapbox.github.com

Wax's prefixed class names.

To be fixed upstream. Currently elements created via mapbox.js uses a prefixed class name like wax-zoomer etc ..
Which is ambiguous to users styling elements and coming from mapbox (not knowing about wax)

Prefixing a name to these controls is the right way to go but we may want a new name for this other than wax. A potential candidate could be .ui-zoomer or .map-zoomer.

@yhahn @tmcw curious on your thoughts here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.