Code Monkey home page Code Monkey logo

otromapa's Introduction

otromapa

otromapa is a template for getting started developing .js map applications.

I've incorporated the frameworks I think best get the job done and produce manageable client code, including the ArcGIS JavaScript API, Backbone.js, Underscore.js, Jasmine, and Sinon.js. Who knows? I may wake up tomorrow and like something else better. The tools used will likely change over time, but the principle of a basic application starting point with core map components common to many map apps will continue to be the goal.

The otromapa application is purely HTML, JavaScript, and CSS.

AMD

JavaScript source is organized into modules using the Asynchronous Module Definition (AMD) API define/require syntax. As of Dojo 1.7, the Dojo module loader supports the AMD format. I've chosen to use the Dojo implementation over other popular options like RequireJS, primarily because the Dojo libraries are already a required dependency of the ArcGIS JavaScript API.

SASS

Stylesheets for the otromapa application are written in SASS, and it is expected that additional styles will be written in SASS and translated to CSS via SASS tools, $ sass --watch scss:css. All SASS stylesheets are in the /scss directory and translated CSS should be added to the /css directory.

HTML Pages

Currently there are 2 HTML pages, defining 2 independent applications.

  • index.html (http://brandoncopeland.github.com/otromapa/index.html) : demo application presenting common use of the majority of modules. index.html loads main.js/app.js and relies on the style.css stylesheet
  • floodplainmap.html (http://brandoncopeland.github.com/otromapa/floodplainmap.html) : early stage prototype of a real world project that helps demonstrate additional components, delivering a more final product, and including multiple apps in the same project. floodplainmap.html also includes a build script under /build - index.html does not. floodplainmap.html loads main-brazoria-floodplain.js/app-brazoria-floodplain.js and relies on the style-floodplainmap.css

Specs

http://brandoncopeland.github.com/otromapa/specrunner.html

Build

The /build directory contains individual build scripts. Build scripts are developed for the r.js library, which is included in /build. r.js is my opinionated preference over Dojo's build tools. r.js is lighter than the Dojo tools and performs well for the needs of this application. Check out the r.js GitHub page for more information on usage. For the floodplainmap app, the node.js syntax would look something like:

$ node build/r.js -o brazoria-floodplain.build.js

Note on building with r.js vs. Dojo...

Many modules use the Dojo's Text Plugin. Because the build is performed with r.js and not Dojo's build tools, this plugin is unavailable. The RequireJS text plugin text.js is included in js/plugins for use with builds only. See build/brazoria-floodplain.build.js for an example setting the path for this plugin.

otromapa's People

Watchers

Brandon Copeland avatar

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.