Skip to content

How to use integrated bus map

Kagami edited this page Jan 11, 2016 · 4 revisions

Integrated HTML Map

Example:

Prepare:

  • 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>

How to Use ?

  • 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)