forked from kagami3421/TainanBusMap
-
Notifications
You must be signed in to change notification settings - Fork 0
How to use integrated bus map
Kagami edited this page Jan 11, 2016
·
4 revisions
-
Clone this project.
-
Setup your Config.js and MainCategory.js files. (See Setup config and category files)
-
Generate route list json file. (AllBusRoutes.json , See Build bus list Json files)
-
Create two folders in your target project folder. (build , LocalData)
-
Copy these files and folders:
- BusDiv.min.css > build folder
- BusDivPage.min.js > build folder
- Config.js > LocalData
- AllBusRoutes.json > LocalData
- MainCategory.js > LocalData
- lib folder
-
Copy the HTML section to
<Header>element in your target page.
<link href="build/BusDiv.min.css" rel="stylesheet" />
<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" rel="stylesheet" />- Copy the HTML section to the end of
<Body>element in your target page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70.0-2014.11.23/jquery.blockUI.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<script src="lib/Leaflet.MakiMarkers.js"></script>
<script src="build/CommonVariable.min.js"></script>
<script src="build/BusRender.min.js"></script>
<script src="build/BusDivPage.min.js"></script>- Add the Div element to the section you want to display map.
<div id="map" bus-ref="6,Y9"></div>- Name of Div element must be named map.
- Display route depend on the value of bus-ref , one more bus routes use comma to separate them.
- (EX. Key bus-ref="Red" , it will render red-line bus on map ; Key bus-ref="Blue,5" , It'll display combo box , make user to choose route.)
- You can use CSS to control size of map element. (Ex. #map)