Commit 83d65d78 authored by Tejesh's avatar Tejesh 🖖

ENH: mapviewer supports tooltipOptions, formhandler notify(message) for...

ENH: mapviewer supports tooltipOptions, formhandler notify(message) for actions and usability enhancements, fix g1.dropdown() urlencoding twice, fixes #93, #95, #96
parent d3b0ca42
Pipeline #62154 passed with stage
in 2 minutes and 10 seconds
......@@ -610,16 +610,17 @@ The full list of options is below. Simple options can be specified as `data-` at
- `hide`: `true` / `false` (default). Hides the column
- `unique`: TODO: {dict of query parameter and display value} or [list of values] or function?
- `edit`: Shows the Edit control. Can be `true` / `false` (default). Can also pass an object.
- `done`: function that gets called after saving the edited row.
- `done`: function that gets called after saving the edited row.
- `add`: Show the Add control. Can be `true` / `false` (default). Can also pass an object.
- `done`: function that gets called after saving the new row.
- `actions`: A list of objects. you need not add it to actions
- `{{action}}`: a function() that gets triggered on clicking the element with `data-action='{{action}}` attribute. The value of `data-action` attribute must match with key `{{action}}` in `actions`.
- `{{action}}`: a function() that gets triggered on clicking the element with `data-action='{{action}}` attribute. The value of `data-action` attribute must match with key `{{action}}` in `actions`.
- function accepts an object with these keys:
- `row`: row data
- `index`: index of the row in the dataset from `src`
Example:
- `highlight_row`: `function(obj) { $(obj.row).addClass('.yellow_color')}`. Either a new column can be defined in `columns:` (example: {`name`: `Additional Col`}) with cell_template having an element with data attribute as `data-action='highlight_row'` or can use an existing column but with custom template that has an element with data attribute as `data-action='highlight_row'`.
- `notify(message)`: a function that shows a notification
- If the return value can be a jQuery deferred (e.g. `$.ajax`), it shows a loading indicator and a success / failure message when the deferred is resolved. Example:
- `highlight_row`: `function(obj) { $(obj.row).addClass('.yellow_color')}`. Either a new column can be defined in `columns:` (example: {`name`: `Additional Col`}) with cell_template having an element with data attribute as `data-action='highlight_row'` or can use an existing column but with custom template that has an element with data attribute as `data-action='highlight_row'`.
- Note: DELETE operation is executed on a row if an element has data attribute `data-action='delete'`. If `delete` action is given in `actions`, the function given for `delete` is executed on click of an element with `data-action='delete'` instead od executing DELETE operation.
- `table`: Shows the table control. Can be:
- `true`: displays a table (default)
......@@ -1308,6 +1309,7 @@ Drilldown feature example:
- `tooltip`: string / function that returns formatted value.
- function(properties) must return a string. feature properties are passed as argument.
- TODO: the properties currently include only geoJSON properties. link properties must be added
- `tooltipOptions`: An object with properties and values from [leaflet tooltip options](https://leafletjs.com/reference-1.3.0.html#tooltip-option)
- `topojson` - same as `Geojson`
- `marker` layer MUST have a data as an array of objects or else MUST have a url (string).
- `url`: String
......
......@@ -11,6 +11,6 @@ url:
pattern: /data-list
handler: FunctionHandler
kwargs:
function: json.dumps(['bengaluru', 'hyderabad', 'mumbai', 'delhi'])
function: json.dumps(['bengaluru "', 'hyderabad', 'mumbai', 'delhi'])
headers:
Content-Type: application/json
......@@ -8,7 +8,7 @@ key = key ? key : '' %>
<!-- var template_dropdown_options -->
<% _.each(data, function(item) { %>
<option value="<%- encodeURIComponent(item) %>"><%- item %></option>
<option value="<%- item %>"><%- item %></option>
<% }) %>
<!-- end -->
......
......@@ -182,13 +182,9 @@ export function formhandler(js_options) {
dataType: 'json',
data: args,
traditional: true
}).fail(function (xhr, status, message) {
$this.html(template['error']({
message: message
}))
}).always(function () {
$('.loader', $this).addClass('d-none')
}).done(done)
.always(function () { $('.loader', $this).addClass('d-none') })
.fail(failHandler.bind(this, $this, template))
}
}
......@@ -279,23 +275,13 @@ function addHandler($this, template_data, options, template) {
template_data.isAdd = false
render_template('table', template_data, options, $this, template)
if (options.add.done) options.add.done()
}).fail(function (xhr, status, message) {
$this.html(template['error']({
message: message
}))
}).always(function () {
$('.loader', $this).addClass('d-none')
})
}).always(function () { $('.loader', $this).addClass('d-none') })
.fail(failHandler.bind(this, $this, template))
} else if (add_btn.html().toLowerCase() == 'add') {
add_btn.html('Save')
// TODO: rerender each cell with <input value='' />
template_data.isAdd = true
render_template('table', template_data, options, $this, template)
$('table tbody input', $this).on('click', function () {
// Attach a class to this row
$(this.parentElement.parentElement).addClass('dirty-row')
})
add_edit_events($this, add_btn)
}
})
}
......@@ -319,69 +305,60 @@ function editHandler($this, template_data, options, template) {
var dirty_td = $('td input[data-key=' + (key.remove_quotes()) + ']', $(dirty_row))
data[key] = template_data['data'][rowIndex][key] = dirty_td.val()
}
all_ajax.push($.ajax(options.src, {
method: 'PUT',
dataType: 'json',
data: data
}).fail(function (xhr, status, message) {
$this.html(template['error']({
message: message
}))
}).always(function () {
if (options.add.editFunction) options.add.editFunction()
$('.loader', $this).addClass('d-none')
})
all_ajax.push(
$.ajax(options.src, {
method: 'PUT',
dataType: 'json',
data: data
}).fail(failHandler.bind(this, $this, template))
.always(function () {
$('.loader', $this).addClass('d-none')
if (options.add.editFunction) options.add.editFunction()
})
)
})
$.when.apply($, all_ajax).then(function () {
$('.loader', $this).addClass('d-none')
if (options.edit.done) options.edit.done()
})
template_data.isEdit = false
render_template('table', template_data, options, $this, template)
} else if (edit_btn.html().toLowerCase() == 'edit') {
edit_btn.html('Save') // TODO: remove hardcoding of name Save
template_data.isEdit = true
render_template('table', template_data, options, $this, template)
$('table tbody input', $this).on('input', function () {
// Attach a class to this row
$(this.parentElement.parentElement).addClass('dirty-row')
})
add_edit_events($this, edit_btn)
}
})
}
function actionHandler($this, options, template) {
var default_action_callback = {
var default_actions = {
'delete': function (arg) {
$('.loader', $this).removeClass('d-none')
$.ajax(options.src, {
method: 'DELETE',
dataType: 'json',
data: arg.row
}).done(function () {
// TODO: show a bootstrap 4 success/failure message
$('.loader', $this).addClass('d-none')
$('.' + $this[0].className + ' tr[data-row="' + arg.rowNo + '"]').hide()
}).fail(function (xhr, status, message) {
$this.html(template['error']({
message: message
}))
})
return $.ajax(options.src, { method: 'DELETE', dataType: 'json', data: arg.row })
.done(function () { $('tr[data-row="' + arg.index + '"]', $this).remove() })
}
}
$this.on('click', '[data-action]', function () {
var action = $(this).data('action'),
row = $(this).closest('[data-val]').data('val'),
rowNo = $(this).closest('[data-row]').data('row')
if (options.actions && options.actions[action]) {
options.actions[action]({ row: row, index: rowNo })
} else {
default_action_callback[action]({ row: row, index: rowNo })
var arg = {
row: $(this).closest('[data-val]').data('val'),
index: $(this).closest('[data-row]').data('row'),
notify: function (message) {
$('.note', $this).html(template['error']({ message: message }))
}
}
var action = $(this).data('action')
var method = (options.actions && (options.actions.filter(function (each_action) { return action in each_action }).length > 0))
? options.actions.filter(function (each_action) { return action in each_action })[0][action]
: default_actions[action]
var deferred = method(arg)
if (deferred && deferred.always) {
$('.loader', $this).removeClass('d-none')
deferred
.always(function () { $('.loader', $this).addClass('d-none') })
.fail(failHandler.bind(this, $this, template))
}
})
}
......@@ -390,3 +367,29 @@ function actionHandler($this, options, template) {
String.prototype.remove_quotes = function () {
return this.toString().replace(/["']/g, '')
}
function failHandler($this, template, xhr, status, message) {
var error = status + ': ' + message
if (xhr.readyState == 0)
error += ' (cannot connect to server)'
$('.note', $this).html(template['error']({message: error}))
}
function add_edit_events($this, save_btn) {
$('tbody input', $this)
// When the user types something, mark the row as changed
.on('change', function () {
$(this).parents('tr').addClass('dirty-row')
})
// When the user presses Enter, click on the "Save" button
.on('keypress', function (e) {
if (e.keyCode == 13) {
$(this).blur() // Remove focus so that change / .dirty-row is triggered
save_btn.trigger('click')
}
})
// Focus on the first element
.eq(0).focus()
}
This diff is collapsed.
......@@ -9,7 +9,6 @@ import deepmerge from 'deepmerge'
import deepclone from 'lodash/cloneDeep'
import isPlainObject from "is-plain-object"
// To add to window
if (!window.Promise) {
window.Promise = Promise;
......@@ -184,11 +183,11 @@ MapViewer.prototype.buildLayer = function (layerName, layerConfig) {
case 'topojson':
case 'geojson':
self.cacheData(layerName, layerConfig[dataOrURL(layerConfig)]).then(function (mapJSON) {
if ('link' in layerConfig) {
self.cacheData(layerName, layerConfig.link[dataOrURL(layerConfig.link)]).then(function (tableData) {
self.mergeData(mapJSON, tableData, layerConfig.link.mapKey, layerConfig.link.dataKey)
gLayer = new L.TopoJSON(mapJSON, layerConfig.options)
self._saveLayer(layerName, gLayer)
if ('attrs' in layerConfig) self._choropleth(layerName, layerConfig)
self.fitToLayer(layerName)
......@@ -196,6 +195,7 @@ MapViewer.prototype.buildLayer = function (layerName, layerConfig) {
})
} else {
gLayer = new L.TopoJSON(mapJSON, layerConfig.options)
self._saveLayer(layerName, gLayer)
if ('attrs' in layerConfig) self._choropleth(layerName, layerConfig)
self.fitToLayer(layerName)
......@@ -267,7 +267,7 @@ MapViewer.prototype._choropleth = function (layerName, layerConfig, filter) {
}
for (prop in layerConfig.attrs) {
if (prop.toLowerCase() == 'tooltip') continue
if (prop == 'tooltip' || prop == 'tooltipOptions') continue
if (typeof (layerConfig.attrs[prop]) != 'object') {
style[prop] = layerConfig.attrs[prop]
continue
......@@ -404,7 +404,8 @@ MapViewer.prototype.renderTooltip = function (layerName, layerConfig) {
if (typeof (layerConfig.attrs.tooltip) === 'function') {
tooltipContent = layerConfig.attrs.tooltip(sublayer.feature.properties)
}
sublayer.bindTooltip(tooltipContent)
var options = 'tooltipOptions' in layerConfig.attrs ? layerConfig.attrs.tooltipOptions: {}
sublayer.bindTooltip(tooltipContent, options)
})
}
......
......@@ -6,7 +6,7 @@ var router = express.Router()
var g1 = require('./../dist/g1.js')
var fs = require('fs')
const port = process.argv.length <= 2 ? 1112 : 1111
const port = process.argv.length <= 2 ? 1112 : 1116
const app = express()
.use(express.static(path.resolve(__dirname, '..')))
......@@ -22,7 +22,7 @@ app.route('/formhandler-data').get(function(req, res, next) {
})
app.route('/data-list').get(function(req, res, next) {
res.send(['bengaluru', 'hyderabad', 'mumbai', 'delhi'])
res.send(['bengaluru "', 'hyderabad', 'mumbai', 'delhi'])
})
const server = app.listen(port, function () {
......
......@@ -68,7 +68,7 @@
.on('load', function() {
$('.container4 select').trigger('change')
var hash = g1.url.parse(location.hash.replace(/^#/, ''))
t.equals(hash.searchKey.loc, 'bengaluru')
t.equals(hash.searchKey.loc, 'bengaluru "')
t.end()
})
.dropdown({
......
......@@ -38,11 +38,11 @@
<script>
tape.onFinish(function () { window.renderComplete = true })
</script>
<div id="city_table"> </div>
<div class="icon-test" data-table="grid" data-src="/formhandler-data"></div>
<div class="icon-test2" data-table="grid" data-src="/formhandler-data"></div>
<div class="icon-test3" data-table="grid" data-src="/formhandler-data"></div>
<div id="city_table"> </div>
<script>
tape('$().formhandler() test format name argument and color scale', function (t) {
......@@ -56,22 +56,54 @@
$('#city_table').formhandler({
src: 'formhandler-city.json',
page: false,
edit: true,
columns: [
{
name: 'city'
},
{
name: '*',
name: 'AD',
format: function (arg) {
return '<svg height="20" width="20"><rect x="0" y="0" width="20" height="20" fill="' + colr_scale(arg) + '"></rect></svg>'
}
},
{
name: 'actions',
template: function (arg) {
return '<td><div data-action="notify_action">Notify</div></td>'
}
}
],
actions: [
{
'notify_action': function(arg) {
console.log(arg)
arg.notify("NOTFIED")
return $.when(setTimeout(() => t.end(), 1000))
}
}
]
}).on('load', function () {
// if arg.name was accessible, then any of rects rendered wont have black color as fill
// debugger
t.equals($('#city_table rect').length, $('#city_table rect').filter(function () { return this.getAttribute('fill') != 'rgb(0, 0, 0)' }).length)
t.end()
// click edit
$("#city_table .edit button").click()
t.ok($('#city_table table tbody tr:nth-child(1) td:nth-child(1) input').is(":focus"), 'On edit, first input field not focussed')
// press enter
t.equals($("#city_table .edit button").text(), 'Save')
var e = jQuery.Event("keypress");
e.which = 13; //choose the one you want
e.keyCode = 13;
$("#city_table table tbody tr:nth-child(1) td:nth-child(1) input").trigger(e);
t.equals($("#city_table .edit button").text(), 'Edit')
$("#city_table tr:nth-child(1) td:nth-child(3) div").click()
t.equals($("#city_table .note").text(), " NOTFIED ×")
//close notification
// $("#city_table .note span").click()
// t.end()
})
})
......
......@@ -38,12 +38,9 @@
tape.onFinish(function () { window.renderComplete = true })
</script>
<div class="delete_btn" data-src="/formhandler-data"></div>
<div class="test-star-without-title" data-src="/formhandler-data"></div>
<div class="test-star-with-title" data-src="/formhandler-data"></div>
<div class="custom_buttons3" data-src="/formhandler-data"></div>
<div class="custom_buttons5" data-src="/formhandler-data"></div>
<div class="add_row1" data-src="/formhandler-data"></div>
<div class="row_template6" data-src="/formhandler-data"></div>
<div class="row_template5" data-src="/formhandler-data"></div>
......@@ -52,11 +49,28 @@
<div class="row_template2" data-src="/formhandler-data"></div>
<div class="row_template1" data-src="/formhandler-data"></div>
<div class="custom_buttons1" data-src="/formhandler-data"></div>
<div class="custom_buttons2" data-src="/formhandler-data"></div>
<div class="custom_buttons4" data-src="/formhandler-data"></div>
<script>
tape('$() test delete action for empty data case', function(t) {
$('.delete_btn').formhandler({
columns: [
{
name: '*'
},
{
name: 'DELETE Action',
template: function() {
return '<td><button data-action="delete">DELETE</button></td>'
}
}
],
pageSize: 3,
add: true,
edit: true
})
t.end()
})
tape('$().formhandler() renders rowTemplate as function', function (t) {
$('.row_template1').formhandler({
columns: [
......@@ -298,97 +312,6 @@
})
tape('$().formhandler() renders with add options as true', function (t) {
$('.add_row1').formhandler({
columns: [
{
name: 'ID',
},
{ name: 'c1' },
{ name: 'Continent' }
],
add: {
done: function() {
// Not checking to pass tests with npm server
// t.equals($('.add_row1 .table tbody tr:first-child td:nth-child(1) a.urlfilter').text().trim(), "baba")
// t.equals($('.add_row1 .table tbody tr:first-child td:nth-child(2) a.urlfilter').text().trim(), '50')
// t.equals($('.add_row1 .table tbody tr:first-child td:nth-child(3) a.urlfilter').text().trim(), 'Asia')
}
},
pageSize: 3
}).on('load', function () {
$('.add_row1 .add-btn').click()
$('.add_row1 .table tbody input[data-key="ID"]').val("baba")
$('.add_row1 .table tbody input[data-key="c1"]').val("50")
$('.add_row1 .table tbody input[data-key="Continent"]').val("Asia")
$('.add_row1 .add-btn').click()
t.end()
})
})
tape('$().formhandler() test adding custom button', function (t) {
$('.custom_buttons3')
.formhandler({
name: 'fhname20',
columns: [
{
name: 'ID'
},
{
name: 'c1'
},
{
name: 'Add Action',
template: '<td><button data-action="add">Add</button></td>'
}
],
pageSize: 5,
actions: {
"add": function({row, index}) {
$('.custom_buttons3 tr[data-row="'+index+'"] td:first-child').html('ID Updated '+row.ID)
}
}
})
.on('load', function () {
t.equals($('.custom_buttons3 table tbody tr:first-child td').length, 3)
t.equals($('.custom_buttons3 table tbody tr:first-child td:nth-child(1)').text().trim(), 'AND')
$('.custom_buttons3 table tbody tr:first-child td:nth-child(3) button').click()
t.equals($('.custom_buttons3 table tbody tr:first-child td:nth-child(1)').text().trim(), 'ID Updated AND')
t.end()
})
})
tape('$().formhandler() test adding custom button with column name *', function (t) {
$('.custom_buttons5')
.formhandler({
columns: [
{
name: '*'
},
{
name: 'ID'
},
{
name: 'c1'
},
{
name: 'Add Action',
template: '<td><button data-action="add">Add</button></td>'
}
],
pageSize: 3,
actions: {
"add": function({row, index}) {
$('.custom_buttons5 tr[data-row="'+index+'"] td:first-child').html('ID Updated '+row.ID)
}
}
})
.on('load', function () {
t.equals($('.custom_buttons3 table thead tr th:last-child a.dropdown-toggle').text().trim(), 'Add Action')
t.end()
})
})
tape('$().formhandler() test the star column with out title option', function (t) {
$('.test-star-without-title').formhandler({
columns: [
......
......@@ -453,10 +453,10 @@
})
.on('load', function () {
// check if Edit button is rendered when edit:true option is given
t.deepEquals($('body > div.fh14 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit.mr-2 > button').text(), "Edit")
t.deepEquals($('body > div.fh14 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').text(), "Edit")
// check if Edit Button changes to Save Button when clicked
$('body > div.fh14 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit.mr-2 > button').click()
t.deepEquals($('body > div.fh14 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit.mr-2 > button').text(), "Save")
$('body > div.fh14 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').click()
t.deepEquals($('body > div.fh14 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').text(), "Save")
// check if when Save Button is visiblle, all the rows in table are rerendered which can be editable
t.deepEquals()
// check if when Save Button is clicked, the Edit Button changes to Edit Button
......@@ -530,10 +530,10 @@
.on('load', function () {
// check if each row has edit and save buttons
// check if Edit button is rendered when edit:true option is given
t.deepEquals($('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit.mr-2 > button').text(), "Edit")
t.deepEquals($('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').text(), "Edit")
// check if Edit Button changes to Save Button when clicked
$('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit.mr-2 > button').click()
t.deepEquals($('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit.mr-2 > button').text(), "Save")
$('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').click()
t.deepEquals($('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').text(), "Save")
var td_elms = $("body > div.fh17 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr > td ")
var input_elms = $("body > div.fh17 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr > td > input")
t.equals(td_elms.length, input_elms.length)
......@@ -1066,40 +1066,6 @@
})
})
tape('$().formhandler() test adding custom button', function (t) {
$('.custom_buttons3')
.formhandler({
columns: [
{
name: 'ID',
link: function (args) { return 'https://en.wikipedia.org/wiki/' + args.row.ID.split(" ").join(" ") },
editable: false
},
{
name: 'c1',
editable: true
},
{
name: 'Add Action',
template: '<td><button data-action="add">Add</button></td>',
editable: false
}
],
pageSize: 5,
edit: true,
actions: {
"add": function(args) {
$('.custom_buttons3 tr[data-row="'+args.index+'"] td:first-child').html('ID Updated '+args.row.ID)
}
}
})
.on('load', function () {
t.equals($('.custom_buttons3 tbody tr:first-child td:first-child').text().trim(), 'AND')
$('.custom_buttons3 tbody tr:first-child td:nth-child(3) button').click()
t.equals($('.custom_buttons3 tbody tr:first-child td:first-child').text(), 'ID Updated AND')
t.end()
})
})
</script>
</body>
......
......@@ -21,44 +21,66 @@
</script>
<div id="tooltip-map" style="height:300px"></div>
<script>
var tooltip_map = g1.mapviewer({
id: 'tooltip-map',
layers: {
worldMap: { type: 'tile', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
cityMarkers: {
type: 'marker',
url: 'cities.json',
latitude: 'lat',
longitude: 'long',
options: {
title: 'column-name',
},
attrs: {
tooltip: 'just some tooltip text test'
}
},
cityCircleMarkers: {
type: 'circleMarker',
url: 'cities.json',
latitude: 'lat',
longitude: 'long',
options: {
title: 'column-name'
tape("g1.mapviewer test if tooltip is added to the circle marker", function (test) {
var tooltip_map = g1.mapviewer({
id: 'tooltip-map',
layers: {
// worldMap: { type: 'tile', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
cityMarkers: {
type: 'marker',
url: 'cities.json',
latitude: 'lat',
longitude: 'long',
options: {
icon: L.divIcon({
className: 'anything'
})
},
attrs: {
tooltip:function (d) {
return d.name
},
tooltipOptions:{
direction: 'center',
permanent: true
}
}
},
attrs: {
fillColor: {
metric: function (row) { return row['pollution'] + row['crimes'] },
scheme: 'Viridis'
indiaGeojson: {
type: 'geojson',
url: 'india-states.geojson',
link: {
url: 'state_score.json',
dataKey: 'name',
mapKey: 'ST_NM'
},
tooltip: 'just some tooltip text test'
attrs: {
fillColor: {
metric: 'score',
scheme: 'Viridis'
}
}
}
}
}
})
tooltip_map.zoomHandler('cityMarkers', 5)
tooltip_map.on('mapviewerloaded', function () {
tooltip_map.gLayers['cityMarkers'].eachLayer(function (sublayer) {
test.ok(tooltip_map.map.hasLayer(sublayer._tooltip))
})
test.end()
})
})
</script>
<div id="tooltipFunction-map" style="height:300px"></div>
<script>
tape("g1.mapviewer test if tooltip is added to the marker", function (test) {
var tooltipFunction_map = g1.mapviewer({
id: 'tooltipFunction-map',
layers: {
......@@ -118,17 +140,17 @@
}
}
})
tape("g1.mapviewer test if tooltip is added to the marker", function (test) {
tooltipFunction_map.on('mapviewerloaded', function () {
tooltipFunction_map.gLayers['cityMarkers'].eachLayer(function (sublayer) {
test.notOk(tooltipFunction_map.map.hasLayer(sublayer._tooltip))
})
tooltipFunction_map.gLayers['cityCircleMarkers'].eachLayer(function (sublayer) {
test.notOk(tooltipFunction_map.map.hasLayer(sublayer._tooltip))
})
// trigger hover event
// $('.leaflet-marker-icon' ,$('#tooltipFunction-map')).dispatch('mouseover')
// // $('.leaflet-marker-icon' ,$('#tooltipFunction-map')).dispatch('mouseover')
$('.leaflet-interactive', $('#tooltipFunction-map')).dispatch('mouseover')
// $('.leaflet-interactive', $('#tooltipFunction-map')).dispatch(new MouseEvent('mouseover', {
// 'view': window,
......@@ -138,13 +160,12 @@
// // 'screenY': 588
// }))
tooltipFunction_map.gLayers['cityMarkers'].eachLayer(function (sublayer) {
test.ok(tooltipFunction_map.map.hasLayer(sublayer._tooltip))
})
tooltipFunction_map.gLayers['cityCircleMarkers'].eachLayer(function (sublayer) {