Project for create custom build from ol3
##Description
This project it's a tools for creating custom builds for OpenLayers3. For this job use [grunt] (http://gruntjs.com/) tasks. It's easy create build with grunt. This project only compile the funcionality that you need for get the minimal library possible. This is your ol3 personal library with you really need. The benefits of a custom compilation are to minimize loading time and reduce data traffic, the result is a faster page loading. In mobile devices this benefit is still more important. With a custom build you can get a library from 142kb (49kb with Gzip) and reduce three times compared to using the complete library of OL3. Aditional is minimized the number of http requests including the map definition with the ol3 library for creating a single file.
When you create a custom build the libraries automatically update at the last review.
##Dependencies
##Getting Started
- Download the project
- Open cmd/Terminal and go to Project Dir.
- npm install ( Install all node_modules).
- build a custom map execute: grunt mapquest
##Create Your Custom Map
-
Create your js map file in directory maps (It's possible create subdir) this contains the ol3 map definition. Js File Example:
var layers = [new ol.layer.Tile({ visible: true, preload: Infinity, source: new ol.source.BingMaps({ key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3', imagerySet: 'Road' }) })]; var map = new ol.Map({ controls: [new ol.control.Zoom()], layers: layers, target: 'map', view: new ol.View({ center: [-6655.5402445057125, 6709968.258934638], zoom: 13 }) }); -
[optional] Create your css file with same name that js file.
-
Open cmd/Terminal and go to Project Dir.
-
Exexute grunt #your file name#
##Results
- Go to Dist folder in project dir.
- You view a Folder that name is your js file.
- The build process create this results:
- ol.min.js -> Compiled Js File.
- ol.min.css -> Minimized Css File.
- ol.min.js.map [optional] -> Source Map for easy debug compiled file.
- gz folder [optional]-> Contains gzip css and js files for best performance. (Recommended use in production)
- ol.js [optional] -> Javascript Deps file for debug.
- {filename}.html [optional] -> html file for test the custom build.
- Include css file in your html file in head section.
- Include js file in your html file.
- Include in head section before css file.
- Include in body section before your html code.
- The map is loaded auto when page is load
##Aditional Info In js map file is posible work with external library's for default it's possible work with Jquery testing (1.9), but it's posible use other external libs, for use this libs it's need create a extern file for Google Closure Compiler and include the extern file in config (Read optional params)
##Optional Params The project include the package.json file, this file contains the aditional params and configurations. ####Build
- update : [true|false] if true get all change of ol3 and google clousure library
- gzip: [true|false] if true create a gzip files of css and js.
- compile: [true|false] if false not compile the js files and write a raw file.
- externs: [Array] path(relative) of extern files from use in js.
- sourceMap: [true|false] if true generate sourceMap for debug compile files.
- html : [true|false] copy a html file from maps dir a dist dir or generate a basic html for view lib created.
- lib: [true|false] if true include the libs in dist folders. This is only for debug with deps or for working with sourceMap
- onlyOl3: [true|false] if true not include your map in the lib, and create the api of ol3 for classes that include in your map file. Only include this api's for created a more small lib for better perfom. ####Libs
- url: Url of git repository for clone
- branch : branch for clone for default use master
For apply change of params in libs it's need delete the folder in libs directory and build the map another time.
##License
Licensed under the MIT license.