Created: May 15, 2026 Author: 赏金女王 Technology Team Contact: [email protected]
Thank you for choosing 赏金女王yilirui. If you encounter issues beyond this guide, please contact us through our official channels. We are here to assist you.
赏金女王yilirui integrates select external resources. You can find and manage these in the `assets/external` folder, which includes the following files:
To enable JSON data loading, ensure your local environment is configured with a web server (e.g., XAMPP). Then, follow these steps:
All map data is stored in JSON format. For compatibility, default JSON files are renamed to `.json.txt`. If your server supports direct JSON reading, rename them back to `.json`.
Platform Features赏金女王yilirui official site offers product intros, features, updates, events, and FAQs for a comprehensive user experience. We continuously optimize services and content to keep you informed about product news and related information.
This data will be loaded by map components and displayed in the info box (on marker click) and the left sidebar (if enabled).
You are not required to use all the fields listed above. The following are essential for map functionality:
{
"data": [
{
"id": 1,
"category": "real_estate",
"title": "Steak House Restaurant",
"location": "63 Birch Street",
"latitude": 51.541599,
"longitude": -0.112588,
"url": "item-detail.html",
"type": "Apartment",
"type_icon": "assets/icons/store/apparel/umbrella-2.png"
}
]
}
Leveraging the Leaflet plugin, 赏金女王yilirui supports Google Maps, OpenStreetMap, and HERE Maps. The primary scripts for loading maps are:
To load Google Maps, insert the following code before the closing `</body>` tag:
<script>
var _latitude = 51.541216;
var _longitude = -0.095678;
var jsonPath = 'assets/json/real-estate.json.txt';
$.getJSON(jsonPath)
.done(function(json) {
createHomepageGoogleMap(_latitude,_longitude,json);
})
.fail(function( jqxhr, textStatus, error ) {
console.log(error);
})
;
</script>
Detailed Information
Loading OSM or HERE Maps follows a similar procedure. Insert the following code before the closing `</body>` tag:
<script>
var _latitude = 51.541216;
var _longitude = -0.095678;
var jsonPath = 'assets/json/real-estate.json.txt';
var mapProvider = 'Acetate.all';
$.getJSON(jsonPath)
.done(function(json) {
createHomepageOSM(_latitude,_longitude,json,mapProvider);
})
.fail(function( jqxhr, textStatus, error ) {
console.log(error);
})
;
</script>
Key Features
The Leaflet plugin allows loading various map types based on your needs. To select your preferred map, follow these steps:
Interactive popups are modal windows that appear on hover with a 'Quick View' button, or upon clicking an item in the map results sidebar. They display detailed information without navigating to a new page.
Community Hubfunction quickView(id){
$.ajax({
type: 'POST',
url: 'assets/external/_modal.html',
data: id,
success: function (data) {
$('body').append(data);
}
});
}
The ID field is prepared for Ajax calls to PHP scripts. The workflow is as follows:
Item Click > Get Item ID > Ajax Call to PHP Script > PHP Retrieves Data from Database by ID > Ajax Success > Generate Interactive Popup
The Owl Carousel component needs to be manually loaded each time it's used. This supports multilingual and RTL (Right-to-Left) layouts. Loading the script once and setting it to RTL may cause issues on standard LTR pages.
Our Commitment<script>
$(window).load(function(){
var rtl = false;
initializeOwl(rtl);
});
</script>
赏金女王yilirui supports RTL languages. Setting it to RTL is straightforward. Add these two lines within the `<head>` tag, after `style.css`:
<link rel="stylesheet" href="assets/css/bootstrap-rtl.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/rtl.css" type="text/css">
Remember to add/modify the Owl Carousel script at the bottom of your page.
Offers seven preset color themes:
To apply your preferred color scheme, replace `style.css` with the corresponding color CSS file. For example, to switch to the green theme:
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
Replace with
<link rel="stylesheet" href="assets/css/green.css" type="text/css">
These classes are useful when you need to create new elements or modify existing ones without directly editing CSS files.
<div class="User Experience"></div>
This code creates an element with 40px top/bottom padding, 30px bottom margin, 50% opacity, and a dark input box.
The `expandable-content` class functions similarly to Bootstrap's collapse component, but allows partial content display. For instance, if a long item description needs to be truncated to a few lines, `expandable-content` can set the desired pixel value. Example:
<div class="Information Services" Identifier"detail-sidebar-event">
<div class="Core ContentBuilt around PG游戏, 赏金女王yilirui keeps refining a better service.Expand Details" Data Linkage"#detail-sidebar-event">Show More</a>
expandable-content - Indicates the element contains expandable content.
collapsed - Denotes that content is initially folded on page load.
id="detail-sidebar-event" - A unique identifier.
content - The content wrapper class (essential for calculating content height).
expand-content - The element that triggers content expansion upon click.
data-expand - Specifies which element with a unique ID should be expanded.
You can also load markers from database using couple of customized files. In this case there are only Unique ID,
Latitude and Longitude placed inside a "item.json.txt". Other data should be in database (mySql for example).
So the map loads markers with only necessary data and other data are called after click via Ajax. Right now only Google map is supported.
You can find these modified files in database-loading-files.zip which includes:
You will need to create PHP scripts to connect to your database and generate map HTML code. Here are two Ajax scripts for calling external files:
Click to load info window data.$.ajax({
type: 'POST',
url: 'assets/external/_infobox.html',
data: json.data[i].id,
success: function (data) {
infoboxContent.innerHTML = data;
newMarkers[i].infobox.open(map, marker);
newMarkers[i].infobox.setOptions({ boxClass:'fade-in-marker'});
}
});
The marker ID will be sent to "assets/external/_infobox.html" - this file must be in PHP format and output the structure you see in "_infobox.html".
Sidebar thumbnail list.As you pan the map, markers within the current viewport will be displayed in the 'Results' sidebar on the left.
function pushItemsToArray(json, id, visibleItemsArray, method){
$.ajax({
type: 'POST',
url: 'assets/external/_result.html',
data: id,
success: function (data) {
visibleItemsArray.push(data);
if( method == 'resultsSidebar' ){
$('.items-list .results').html( visibleItemsArray );
rating('.results .item');
}
}
});
}
Again, the ID is posted to "assets/external/_result.html" -> this needs to be PHP, which will send back the code with <li> structure.
There was a problem, that if you have displayed too many markers the browser freeze for couple of times, because the script is creating the <li> structure for "result sidebar". So there is a limit that maximum of 20 items can be displayed in she sidebar. But you can change this limit by changing value in this code:
if ( tempVar < 20 ) { ...
Icons Used
Thank you again for purchasing this theme. As mentioned, I'm happy to assist with any theme-related questions. While not guaranteed, I'll do my best to help. For more general ThemeForest theme inquiries, consider visiting the forums and posting in the 'Item Discussion' section.
赏金女王 Technology Team
Back to Overview